chore: max-old-space-size=8192

closes #7196

.babelrc

@@ -12,7 +12,7 @@
         "legacy": true
       }
     ],
-    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-transform-class-properties",
     [
       "transform-inline-environment-variables",
       {
@@ -60,4 +60,4 @@
       ]
     }
   }
-}
+}

.circleci/config.yml

@@ -126,7 +126,7 @@ jobs:
             docker buildx install
             docker context create docker-multiarch
             docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
-            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
+            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
             docker buildx inspect --builder docker-multiarch --bootstrap
             docker buildx use docker-multiarch
       - run:
@@ -142,9 +142,9 @@ jobs:
           name: Build and push Docker image
           command: |
             if [[ "$CIRCLE_TAG" == *"-"* ]]; then
-              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
             else
-              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
             fi
 
 workflows:

.env.sample

@@ -127,6 +127,26 @@ GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=
 
+# To configure Discord auth, you'll need to create a Discord Application at
+# => https://discord.com/developers/applications/
+#
+# When configuring the Client ID, add a redirect URL under "OAuth2":
+# https://<URL>/auth/discord.callback
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+
+# DISCORD_SERVER_ID should be the ID of the Discord server that Outline is
+# integrated with. 
+# Used to verify that the user is a member of the server as well as server
+# metadata such as nicknames, server icon and name.
+DISCORD_SERVER_ID=
+
+# DISCORD_SERVER_ROLES should be a comma separated list of role IDs that are
+# allowed to access Outline. If this is not set, all members of the server
+# will be allowed to access Outline.
+# DISCORD_SERVER_ID and DISCORD_SERVER_ROLES must be set together.
+DISCORD_SERVER_ROLES=
+
 # –––––––––––––––– OPTIONAL ––––––––––––––––
 
 # Base64 encoded private key and certificate for HTTPS termination. This is only

.eslintrc

@@ -41,6 +41,7 @@
     "@typescript-eslint/no-shadow": [
       "warn",
       {
+        "allow": ["transaction"],
         "hoist": "all",
         "ignoreTypeValueShadow": true
       }
@@ -139,4 +140,4 @@
       "typescript": {}
     }
   }
-}
+}

.jestconfig.json

@@ -7,7 +7,8 @@
       "roots": ["<rootDir>/server", "<rootDir>/plugins"],
       "moduleNameMapper": {
         "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
+        "^@shared/(.*)$": "<rootDir>/shared/$1",
+        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
       },
       "setupFiles": ["<rootDir>/__mocks__/console.js"],
       "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
@@ -22,7 +23,8 @@
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
         "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
+        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
       },
       "modulePaths": ["<rootDir>/app"],
       "setupFiles": ["<rootDir>/__mocks__/window.js"],
@@ -37,7 +39,8 @@
       "roots": ["<rootDir>/shared"],
       "moduleNameMapper": {
         "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
+        "^@shared/(.*)$": "<rootDir>/shared/$1",
+        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
       },
       "setupFiles": ["<rootDir>/__mocks__/console.js"],
       "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
@@ -50,7 +53,8 @@
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
         "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
+        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
       },
       "setupFiles": ["<rootDir>/__mocks__/window.js"],
       "testEnvironment": "jsdom",

Dockerfile

@@ -5,9 +5,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:20-alpine AS runner
+FROM node:20-slim AS runner
-
-RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
 
 LABEL org.opencontainers.image.source="https://github.com/outline/outline"
 
@@ -22,8 +20,9 @@ COPY --from=base $APP_PATH/.sequelizerc ./.sequelizerc
 COPY --from=base $APP_PATH/node_modules ./node_modules
 COPY --from=base $APP_PATH/package.json ./package.json
 
-RUN addgroup -g 1001 -S nodejs && \
+# Create a non-root user compatible with Debian and BusyBox based images
-  adduser -S nodejs -u 1001 && \
+RUN addgroup --gid 1001 nodejs && \
+  adduser --uid 1001 --ingroup nodejs nodejs && \
   chown -R nodejs:nodejs $APP_PATH/build && \
   mkdir -p /var/lib/outline && \
 	chown -R nodejs:nodejs /var/lib/outline

Dockerfile.base

@@ -1,19 +1,26 @@
 ARG APP_PATH=/opt/outline
-FROM node:20-alpine AS deps
+FROM node:20-slim AS deps
 
 ARG APP_PATH
 WORKDIR $APP_PATH
 COPY ./package.json ./yarn.lock ./
 COPY ./patches ./patches
 
+RUN  apt-get update \
+  && apt-get install -y wget \
+  && rm -rf /var/lib/apt/lists/*
+
 RUN yarn install --no-optional --frozen-lockfile --network-timeout 1000000 && \
   yarn cache clean
 
 COPY . .
 ARG CDN_URL
-RUN yarn build
+RUN NODE_OPTIONS="--max-old-space-size=8192" yarn build
 
 RUN rm -rf node_modules
 
 RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 && \
   yarn cache clean
+
+ENV PORT 3000
+HEALTHCHECK CMD wget -qO- http://localhost:${PORT}/_health | grep -q "OK" || exit 1

__mocks__/react-medium-image-zoom.js

@@ -0,0 +1 @@
+export default null;

app.json

@@ -33,6 +33,11 @@
       "generator": "secret",
       "required": true
     },
+    "UTILS_SECRET": {
+      "description": "A 32-character secret key, generate with openssl rand -hex 32",
+      "generator": "secret",
+      "required": true
+    },
     "ENABLE_UPDATES": {
       "value": "true",
       "required": true

app/actions/definitions/apiKeys.tsx

@@ -0,0 +1,25 @@
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import ApiKeyNew from "~/scenes/ApiKeyNew";
+import { createAction } from "..";
+import { SettingsSection } from "../sections";
+
+export const createApiKey = createAction({
+  name: ({ t }) => t("New API key"),
+  analyticsName: "New API key",
+  section: SettingsSection,
+  icon: <PlusIcon />,
+  keywords: "create",
+  visible: () =>
+    stores.policies.abilities(stores.auth.team?.id || "").createApiKey,
+  perform: ({ t, event }) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    stores.dialogs.openModal({
+      title: t("New API key"),
+      content: <ApiKeyNew onSubmit={stores.dialogs.closeAllModals} />,
+    });
+  },
+});

app/actions/definitions/collections.tsx

@@ -4,6 +4,7 @@ import {
   PadlockIcon,
   PlusIcon,
   SearchIcon,
+  ShapesIcon,
   StarredIcon,
   TrashIcon,
   UnstarredIcon,
@@ -11,7 +12,6 @@ import {
 import * as React from "react";
 import stores from "~/stores";
 import Collection from "~/models/Collection";
-import CollectionPermissions from "~/scenes/CollectionPermissions";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
@@ -21,9 +21,8 @@ import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
 import { setPersistedState } from "~/hooks/usePersistedState";
-import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
 import history from "~/utils/history";
-import { searchPath } from "~/utils/routeHelpers";
+import { newTemplatePath, searchPath } from "~/utils/routeHelpers";
 
 const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
   <DynamicCollectionIcon collection={collection} />
@@ -111,24 +110,16 @@ export const editCollectionPermissions = createAction({
       return;
     }
 
-    if (FeatureFlags.isEnabled(Feature.newCollectionSharing)) {
+    stores.dialogs.openModal({
-      stores.dialogs.openModal({
+      title: t("Share this collection"),
-        title: t("Share this collection"),
+      content: (
-        content: (
+        <SharePopover
-          <SharePopover
+          collection={collection}
-            collection={collection}
+          onRequestClose={stores.dialogs.closeAllModals}
-            onRequestClose={stores.dialogs.closeAllModals}
+          visible
-            visible
+        />
-          />
+      ),
-        ),
+    });
-      });
-    } else {
-      stores.dialogs.openModal({
-        title: t("Collection permissions"),
-        fullscreen: true,
-        content: <CollectionPermissions collectionId={activeCollectionId} />,
-      });
-    }
   },
 });
 
@@ -137,7 +128,9 @@ export const searchInCollection = createAction({
   analyticsName: "Search collection",
   section: CollectionSection,
   icon: <SearchIcon />,
-  visible: ({ activeCollectionId }) => !!activeCollectionId,
+  visible: ({ activeCollectionId }) =>
+    !!activeCollectionId &&
+    stores.policies.abilities(activeCollectionId).readDocument,
   perform: ({ activeCollectionId }) => {
     history.push(searchPath(undefined, { collectionId: activeCollectionId }));
   },
@@ -230,6 +223,27 @@ export const deleteCollection = createAction({
   },
 });
 
+export const createTemplate = createAction({
+  name: ({ t }) => t("New template"),
+  analyticsName: "New template",
+  section: CollectionSection,
+  icon: <ShapesIcon />,
+  keywords: "new create template",
+  visible: ({ activeCollectionId, stores }) =>
+    !!(
+      !!activeCollectionId &&
+      stores.policies.abilities(activeCollectionId).createDocument
+    ),
+  perform: ({ activeCollectionId, event }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+    event?.preventDefault();
+    event?.stopPropagation();
+    history.push(newTemplatePath(activeCollectionId));
+  },
+});
+
 export const rootCollectionActions = [
   openCollection,
   createCollection,

app/actions/definitions/comments.tsx

@@ -0,0 +1,90 @@
+import { DoneIcon, TrashIcon } from "outline-icons";
+import * as React from "react";
+import { toast } from "sonner";
+import stores from "~/stores";
+import Comment from "~/models/Comment";
+import CommentDeleteDialog from "~/components/CommentDeleteDialog";
+import history from "~/utils/history";
+import { createAction } from "..";
+import { DocumentSection } from "../sections";
+
+export const deleteCommentFactory = ({
+  comment,
+  onDelete,
+}: {
+  comment: Comment;
+  onDelete: () => void;
+}) =>
+  createAction({
+    name: ({ t }) => `${t("Delete")}…`,
+    analyticsName: "Delete comment",
+    section: DocumentSection,
+    icon: <TrashIcon />,
+    keywords: "trash",
+    dangerous: true,
+    visible: () => stores.policies.abilities(comment.id).delete,
+    perform: ({ t, event }) => {
+      event?.preventDefault();
+      event?.stopPropagation();
+
+      stores.dialogs.openModal({
+        title: t("Delete comment"),
+        content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
+      });
+    },
+  });
+
+export const resolveCommentFactory = ({
+  comment,
+  onResolve,
+}: {
+  comment: Comment;
+  onResolve: () => void;
+}) =>
+  createAction({
+    name: ({ t }) => t("Mark as resolved"),
+    analyticsName: "Resolve thread",
+    section: DocumentSection,
+    icon: <DoneIcon outline />,
+    visible: () =>
+      stores.policies.abilities(comment.id).resolve &&
+      stores.policies.abilities(comment.documentId).update,
+    perform: async ({ t }) => {
+      await comment.resolve();
+
+      history.replace({
+        ...history.location,
+        state: null,
+      });
+
+      onResolve();
+      toast.success(t("Thread resolved"));
+    },
+  });
+
+export const unresolveCommentFactory = ({
+  comment,
+  onUnresolve,
+}: {
+  comment: Comment;
+  onUnresolve: () => void;
+}) =>
+  createAction({
+    name: ({ t }) => t("Mark as unresolved"),
+    analyticsName: "Unresolve thread",
+    section: DocumentSection,
+    icon: <DoneIcon outline />,
+    visible: () =>
+      stores.policies.abilities(comment.id).unresolve &&
+      stores.policies.abilities(comment.documentId).update,
+    perform: async () => {
+      await comment.unresolve();
+
+      history.replace({
+        ...history.location,
+        state: null,
+      });
+
+      onUnresolve();
+    },
+  });

app/actions/definitions/documents.tsx

@@ -51,6 +51,7 @@ import {
   documentHistoryPath,
   homePath,
   newDocumentPath,
+  newNestedDocumentPath,
   searchPath,
   documentPath,
   urlify,
@@ -140,15 +141,10 @@ export const createNestedDocument = createAction({
     !!activeDocumentId &&
     stores.policies.abilities(currentTeamId).createDocument &&
     stores.policies.abilities(activeDocumentId).createChildDocument,
-  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+  perform: ({ activeDocumentId, inStarredSection }) =>
-    history.push(
+    history.push(newNestedDocumentPath(activeDocumentId), {
-      newDocumentPath(activeCollectionId, {
+      starred: inStarredSection,
-        parentDocumentId: activeDocumentId,
+    }),
-      }),
-      {
-        starred: inStarredSection,
-      }
-    ),
 });
 
 export const starDocument = createAction({
@@ -676,22 +672,22 @@ export const importDocument = createAction({
   },
 });
 
-export const createTemplate = createAction({
+export const createTemplateFromDocument = createAction({
   name: ({ t }) => t("Templatize"),
   analyticsName: "Templatize document",
   section: DocumentSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (document?.isTemplate || !document?.isActive) {
       return false;
     }
-    const document = stores.documents.get(activeDocumentId);
     return !!(
       !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).update &&
+      stores.policies.abilities(activeCollectionId).update
-      !document?.isTemplate &&
-      !!document?.isActive
     );
   },
   perform: ({ activeDocumentId, stores, t, event }) => {
@@ -700,7 +696,6 @@ export const createTemplate = createAction({
     }
     event?.preventDefault();
     event?.stopPropagation();
-
     stores.dialogs.openModal({
       title: t("Create template"),
       content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
@@ -988,7 +983,7 @@ export const rootDocumentActions = [
   openDocument,
   archiveDocument,
   createDocument,
-  createTemplate,
+  createTemplateFromDocument,
   deleteDocument,
   importDocument,
   downloadDocument,

app/actions/definitions/navigation.tsx

@@ -3,7 +3,6 @@ import {
   SearchIcon,
   ArchiveIcon,
   TrashIcon,
-  EditIcon,
   OpenIcon,
   SettingsIcon,
   KeyboardIcon,
@@ -12,6 +11,7 @@ import {
   ProfileIcon,
   BrowserIcon,
   ShapesIcon,
+  DraftsIcon,
 } from "outline-icons";
 import * as React from "react";
 import { UrlHelper } from "@shared/utils/UrlHelper";
@@ -57,7 +57,7 @@ export const navigateToDrafts = createAction({
   name: ({ t }) => t("Drafts"),
   analyticsName: "Navigate to drafts",
   section: NavigationSection,
-  icon: <EditIcon />,
+  icon: <DraftsIcon />,
   perform: () => history.push(draftsPath()),
   visible: ({ location }) => location.pathname !== draftsPath(),
 });

app/components/Analytics.tsx

@@ -2,13 +2,14 @@
 /* global ga */
 import escape from "lodash/escape";
 import * as React from "react";
-import { IntegrationService } from "@shared/types";
+import { IntegrationService, PublicEnv } from "@shared/types";
 import env from "~/env";
 
 type Props = {
   children?: React.ReactNode;
 };
 
+// TODO: Refactor this component to allow injection from plugins
 const Analytics: React.FC = ({ children }: Props) => {
   // Google Analytics 3
   React.useEffect(() => {
@@ -43,12 +44,16 @@ const Analytics: React.FC = ({ children }: Props) => {
   React.useEffect(() => {
     const measurementIds = [];
 
-    if (env.analytics.service === IntegrationService.GoogleAnalytics) {
-      measurementIds.push(escape(env.analytics.settings?.measurementId));
-    }
     if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
       measurementIds.push(env.GOOGLE_ANALYTICS_ID);
     }
+
+    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
+      if (integration.service === IntegrationService.GoogleAnalytics) {
+        measurementIds.push(escape(integration.settings?.measurementId));
+      }
+    });
+
     if (measurementIds.length === 0) {
       return;
     }
@@ -75,6 +80,32 @@ const Analytics: React.FC = ({ children }: Props) => {
     document.getElementsByTagName("head")[0]?.appendChild(script);
   }, []);
 
+  // Matomo
+  React.useEffect(() => {
+    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
+      if (integration.service !== IntegrationService.Matomo) {
+        return;
+      }
+
+      // @ts-expect-error - Matomo global variable
+      const _paq = (window._paq = window._paq || []);
+      _paq.push(["trackPageView"]);
+      _paq.push(["enableLinkTracking"]);
+      (function () {
+        const u = integration.settings?.instanceUrl;
+        _paq.push(["setTrackerUrl", u + "matomo.php"]);
+        _paq.push(["setSiteId", integration.settings?.measurementId]);
+        const d = document,
+          g = d.createElement("script"),
+          s = d.getElementsByTagName("script")[0];
+        g.type = "text/javascript";
+        g.async = true;
+        g.src = u + "matomo.js";
+        s.parentNode?.insertBefore(g, s);
+      })();
+    });
+  }, []);
+
   return <>{children}</>;
 };
 

app/components/ArrowKeyNavigation.tsx

@@ -1,54 +1,50 @@
+import { RovingTabIndexProvider } from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
 import * as React from "react";
-import {
-  useCompositeState,
-  Composite,
-  CompositeStateReturn,
-} from "reakit/Composite";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
-  children: (composite: CompositeStateReturn) => React.ReactNode;
+  children: () => React.ReactNode;
   onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
+  items: unknown[];
 };
 
 function ArrowKeyNavigation(
-  { children, onEscape, ...rest }: Props,
+  { children, onEscape, items, ...rest }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
-  const composite = useCompositeState();
-
   const handleKeyDown = React.useCallback(
-    (ev) => {
+    (ev: React.KeyboardEvent<HTMLDivElement>) => {
       if (onEscape) {
         if (ev.nativeEvent.isComposing) {
           return;
         }
 
         if (ev.key === "Escape") {
+          ev.preventDefault();
           onEscape(ev);
         }
 
         if (
           ev.key === "ArrowUp" &&
-          composite.currentId === composite.items[0].id
+          // If the first item is focused and the user presses ArrowUp
+          ev.currentTarget.firstElementChild === document.activeElement
         ) {
           onEscape(ev);
         }
       }
     },
-    [composite.currentId, composite.items, onEscape]
+    [onEscape]
   );
 
   return (
-    <Composite
+    <RovingTabIndexProvider
-      {...rest}
+      options={{ focusOnClick: true, direction: "both" }}
-      {...composite}
+      items={items}
-      onKeyDown={handleKeyDown}
-      role="menu"
-      ref={ref}
     >
-      {children(composite)}
+      <div {...rest} onKeyDown={handleKeyDown} ref={ref}>
-    </Composite>
+        {children()}
+      </div>
+    </RovingTabIndexProvider>
   );
 }
 

app/components/Button.tsx

@@ -49,8 +49,8 @@ const RealButton = styled(ActionButton)<RealProps>`
   &:disabled {
     cursor: default;
     pointer-events: none;
-    color: ${(props) => transparentize(0.5, props.theme.accentText)};
+    color: ${(props) => transparentize(0.3, props.theme.accentText)};
-    background: ${(props) => lighten(0.2, props.theme.accent)};
+    background: ${(props) => transparentize(0.1, props.theme.accent)};
 
     svg {
       fill: ${(props) => props.theme.white50};

app/components/Collection/CollectionForm.tsx

@@ -11,19 +11,22 @@ import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
-import IconPicker from "~/components/IconPicker";
+import Icon from "~/components/Icon";
 import Input from "~/components/Input";
 import InputSelectPermission from "~/components/InputSelectPermission";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import { EmptySelectValue } from "~/types";
 import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
 
+const IconPicker = React.lazy(() => import("~/components/IconPicker"));
+
 export interface FormData {
   name: string;
   icon: string;
-  color: string;
+  color: string | null;
   sharing: boolean;
   permission: CollectionPermission | undefined;
 }
@@ -37,7 +40,16 @@ export const CollectionForm = observer(function CollectionForm_({
 }) {
   const team = useCurrentTeam();
   const { t } = useTranslation();
+
   const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
+
+  const iconColor = React.useMemo(
+    () => collection?.color ?? randomElement(colorPalette),
+    [collection?.color]
+  );
+
+  const fallbackIcon = <Icon value="collection" color={iconColor} />;
+
   const {
     register,
     handleSubmit: formHandleSubmit,
@@ -53,7 +65,7 @@ export const CollectionForm = observer(function CollectionForm_({
       icon: collection?.icon,
       sharing: collection?.sharing ?? true,
       permission: collection?.permission,
-      color: collection?.color ?? randomElement(colorPalette),
+      color: iconColor,
     },
   });
 
@@ -70,20 +82,20 @@ export const CollectionForm = observer(function CollectionForm_({
           "collection"
       );
     }
-  }, [values.name, collection]);
+  }, [collection, hasOpenedIconPicker, setValue, values.name, values.icon]);
 
   React.useEffect(() => {
     setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
   }, [setFocus]);
 
-  const handleIconPickerChange = React.useCallback(
+  const handleIconChange = React.useCallback(
-    (color: string, icon: string) => {
+    (icon: string, color: string | null) => {
       if (icon !== values.icon) {
         setFocus("name");
       }
 
-      setValue("color", color);
       setValue("icon", icon);
+      setValue("color", color);
     },
     [setFocus, setValue, values.icon]
   );
@@ -105,13 +117,16 @@ export const CollectionForm = observer(function CollectionForm_({
             maxLength: CollectionValidation.maxNameLength,
           })}
           prefix={
-            <StyledIconPicker
+            <React.Suspense fallback={fallbackIcon}>
-              onOpen={setHasOpenedIconPicker}
+              <StyledIconPicker
-              onChange={handleIconPickerChange}
+                icon={values.icon}
-              initial={values.name[0]}
+                color={values.color ?? iconColor}
-              color={values.color}
+                initial={values.name[0]}
-              icon={values.icon}
+                popoverPosition="right"
-            />
+                onOpen={setHasOpenedIconPicker}
+                onChange={handleIconChange}
+              />
+            </React.Suspense>
           }
           autoComplete="off"
           autoFocus
@@ -128,8 +143,10 @@ export const CollectionForm = observer(function CollectionForm_({
             <InputSelectPermission
               ref={field.ref}
               value={field.value}
-              onChange={(value: CollectionPermission) => {
+              onChange={(
-                field.onChange(value);
+                value: CollectionPermission | typeof EmptySelectValue
+              ) => {
+                field.onChange(value === EmptySelectValue ? null : value);
               }}
               note={t(
                 "The default access for workspace members, you can share with more users or groups later."

app/components/ContextMenu/MenuItem.tsx

@@ -1,11 +1,12 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
-import { ellipsis } from "polished";
+import { ellipsis, transparentize } from "polished";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import Text from "../Text";
 import MenuIconWrapper from "./MenuIconWrapper";
 
 type Props = {
@@ -160,6 +161,10 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
         color: ${props.theme.accentText};
         fill: ${props.theme.accentText};
       }
+
+      ${Text} {
+        color: ${transparentize(0.5, props.theme.accentText)};
+      }
     }
   }
   `}

app/components/ContextMenu/Template.tsx

@@ -30,6 +30,7 @@ type Props = Omit<MenuStateReturn, "items"> & {
   actions?: (Action | MenuSeparator | MenuHeading)[];
   context?: Partial<ActionContext>;
   items?: TMenuItem[];
+  showIcons?: boolean;
 };
 
 const Disclosure = styled(ExpandedIcon)`
@@ -98,7 +99,7 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
     });
 }
 
-function Template({ items, actions, context, ...menu }: Props) {
+function Template({ items, actions, context, showIcons, ...menu }: Props) {
   const ctx = useActionContext({
     isContextMenu: true,
   });
@@ -124,7 +125,8 @@ function Template({ items, actions, context, ...menu }: Props) {
         if (
           iconIsPresentInAnyMenuItem &&
           item.type !== "separator" &&
-          item.type !== "heading"
+          item.type !== "heading" &&
+          showIcons !== false
         ) {
           item.icon = item.icon || <MenuIconWrapper aria-hidden />;
         }
@@ -138,7 +140,7 @@ function Template({ items, actions, context, ...menu }: Props) {
               key={index}
               disabled={item.disabled}
               selected={item.selected}
-              icon={item.icon}
+              icon={showIcons !== false ? item.icon : undefined}
               {...menu}
             >
               {item.title}
@@ -156,7 +158,7 @@ function Template({ items, actions, context, ...menu }: Props) {
               selected={item.selected}
               level={item.level}
               target={item.href.startsWith("#") ? undefined : "_blank"}
-              icon={item.icon}
+              icon={showIcons !== false ? item.icon : undefined}
               {...menu}
             >
               {item.title}
@@ -174,7 +176,7 @@ function Template({ items, actions, context, ...menu }: Props) {
               selected={item.selected}
               dangerous={item.dangerous}
               key={index}
-              icon={item.icon}
+              icon={showIcons !== false ? item.icon : undefined}
               {...menu}
             >
               {item.title}
@@ -190,7 +192,12 @@ function Template({ items, actions, context, ...menu }: Props) {
               id={`${item.title}-${index}`}
               templateItems={item.items}
               parentMenuState={menu}
-              title={<Title title={item.title} icon={item.icon} />}
+              title={
+                <Title
+                  title={item.title}
+                  icon={showIcons !== false ? item.icon : undefined}
+                />
+              }
               {...menu}
             />
           );

app/components/DocumentBreadcrumb.tsx

@@ -6,6 +6,7 @@ import styled from "styled-components";
 import type { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
@@ -15,7 +16,6 @@ import {
   settingsPath,
   trashPath,
 } from "~/utils/routeHelpers";
-import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   children?: React.ReactNode;
@@ -106,9 +106,9 @@ const DocumentBreadcrumb: React.FC<Props> = ({
     path.slice(0, -1).forEach((node: NavigationNode) => {
       output.push({
         type: "route",
-        title: node.emoji ? (
+        title: node.icon ? (
           <>
-            <EmojiIcon emoji={node.emoji} /> {node.title}
+            <StyledIcon value={node.icon} color={node.color} /> {node.title}
           </>
         ) : (
           node.title
@@ -144,6 +144,10 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   );
 };
 
+const StyledIcon = styled(Icon)`
+  margin-right: 2px;
+`;
+
 const SmallSlash = styled(GoToIcon)`
   width: 12px;
   height: 12px;

app/components/DocumentCard.tsx

@@ -9,15 +9,17 @@ import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
 import { s, ellipsis } from "@shared/styles";
+import { IconType } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import { hover } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
-import EmojiIcon from "./Icons/EmojiIcon";
 import Text from "./Text";
 import Tooltip from "./Tooltip";
 
@@ -52,6 +54,8 @@ function DocumentCard(props: Props) {
     disabled: !isDraggable || !canUpdatePin,
   });
 
+  const hasEmojiInTitle = determineIconType(document.icon) === IconType.Emoji;
+
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -109,12 +113,18 @@ function DocumentCard(props: Props) {
               <path d="M19.5 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V0.5H0.792893L19.5 19.2071V19.5Z" />
             </Fold>
 
-            {document.emoji ? (
+            {document.icon ? (
-              <Squircle color={theme.slateLight}>
+              <DocumentSquircle
-                <EmojiIcon emoji={document.emoji} size={24} />
+                icon={document.icon}
-              </Squircle>
+                color={document.color ?? undefined}
+              />
             ) : (
-              <Squircle color={collection?.color}>
+              <Squircle
+                color={
+                  collection?.color ??
+                  (!pin?.collectionId ? theme.slateLight : theme.slateDark)
+                }
+              >
                 {collection?.icon &&
                 collection?.icon !== "letter" &&
                 collection?.icon !== "collection" &&
@@ -127,8 +137,8 @@ function DocumentCard(props: Props) {
             )}
             <div>
               <Heading dir={document.dir}>
-                {document.emoji
+                {hasEmojiInTitle
-                  ? document.titleWithDefault.replace(document.emoji, "")
+                  ? document.titleWithDefault.replace(document.icon!, "")
                   : document.titleWithDefault}
               </Heading>
               <DocumentMeta size="xsmall">
@@ -159,6 +169,24 @@ function DocumentCard(props: Props) {
   );
 }
 
+const DocumentSquircle = ({
+  icon,
+  color,
+}: {
+  icon: string;
+  color?: string;
+}) => {
+  const theme = useTheme();
+  const iconType = determineIconType(icon)!;
+  const squircleColor = iconType === IconType.SVG ? color : theme.slateLight;
+
+  return (
+    <Squircle color={squircleColor}>
+      <Icon value={icon} color={theme.white} />
+    </Squircle>
+  );
+};
+
 const Clock = styled(ClockIcon)`
   flex-shrink: 0;
 `;

app/components/DocumentExplorer.tsx

@@ -18,8 +18,8 @@ import { NavigationNode } from "@shared/types";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
 import { Outline } from "~/components/Input";
 import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
@@ -216,25 +216,30 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
     }) => {
       const node = data[index];
       const isCollection = node.type === "collection";
-      let icon, title: string, emoji: string | undefined, path;
+      let renderedIcon,
+        title: string,
+        icon: string | undefined,
+        color: string | undefined,
+        path;
 
       if (isCollection) {
         const col = collections.get(node.collectionId as string);
-        icon = col && (
+        renderedIcon = col && (
           <CollectionIcon collection={col} expanded={isExpanded(index)} />
         );
         title = node.title;
       } else {
         const doc = documents.get(node.id);
-        emoji = doc?.emoji ?? node.emoji;
+        icon = doc?.icon ?? node.icon;
+        color = doc?.color ?? node.color;
         title = doc?.title ?? node.title;
 
-        if (emoji) {
+        if (icon) {
-          icon = <EmojiIcon emoji={emoji} />;
+          renderedIcon = <Icon value={icon} color={color} />;
         } else if (doc?.isStarred) {
-          icon = <StarredIcon color={theme.yellow} />;
+          renderedIcon = <StarredIcon color={theme.yellow} />;
         } else {
-          icon = <DocumentIcon color={theme.textSecondary} />;
+          renderedIcon = <DocumentIcon color={theme.textSecondary} />;
         }
 
         path = ancestors(node)
@@ -254,7 +259,7 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
           }}
           onPointerMove={() => setActiveNode(index)}
           onClick={() => toggleSelect(index)}
-          icon={icon}
+          icon={renderedIcon}
           title={title}
           path={path}
         />
@@ -275,7 +280,7 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
           selected={isSelected(index)}
           active={activeNode === index}
           expanded={isExpanded(index)}
-          icon={icon}
+          icon={renderedIcon}
           title={title}
           depth={node.depth as number}
           hasChildren={hasChildren(index)}

app/components/DocumentListItem.tsx

@@ -1,17 +1,21 @@
+import {
+  useFocusEffect,
+  useRovingTabIndex,
+} from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { CompositeStateReturn, CompositeItem } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import EventBoundary from "@shared/components/EventBoundary";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
 import DocumentMeta from "~/components/DocumentMeta";
-import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
 import Highlight from "~/components/Highlight";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
@@ -20,7 +24,6 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { hover } from "~/styles";
 import { documentPath } from "~/utils/routeHelpers";
-import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   document: Document;
@@ -32,7 +35,7 @@ type Props = {
   showPin?: boolean;
   showDraft?: boolean;
   showTemplate?: boolean;
-} & CompositeStateReturn;
+};
 
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
 
@@ -49,6 +52,15 @@ function DocumentListItem(
   const user = useCurrentUser();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
+  let itemRef: React.Ref<HTMLAnchorElement> =
+    React.useRef<HTMLAnchorElement>(null);
+  if (ref) {
+    itemRef = ref;
+  }
+
+  const { focused, ...rovingTabIndex } = useRovingTabIndex(itemRef, false);
+  useFocusEffect(focused, itemRef);
+
   const {
     document,
     showParentDocuments,
@@ -68,9 +80,8 @@ function DocumentListItem(
     !document.isDraft && !document.isArchived && !document.isTemplate;
 
   return (
-    <CompositeItem
+    <DocumentLink
-      as={DocumentLink}
+      ref={itemRef}
-      ref={ref}
       dir={document.dir}
       role="menuitem"
       $isStarred={document.isStarred}
@@ -89,12 +100,13 @@ function DocumentListItem(
         handleMenuOpen();
       }}
       {...rest}
+      {...rovingTabIndex}
     >
       <Content>
         <Heading dir={document.dir}>
-          {document.emoji && (
+          {document.icon && (
             <>
-              <EmojiIcon emoji={document.emoji} size={24} />
+              <Icon value={document.icon} color={document.color ?? undefined} />
               &nbsp;
             </>
           )}
@@ -150,7 +162,7 @@ function DocumentListItem(
           modal={false}
         />
       </Actions>
-    </CompositeItem>
+    </DocumentLink>
   );
 }
 
@@ -271,6 +283,8 @@ const ResultContext = styled(Highlight)`
   font-size: 15px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;
+  max-height: 90px;
+  overflow: hidden;
 `;
 
 export default observer(React.forwardRef(DocumentListItem));

app/components/EmojiPicker/components.tsx

@@ -1,23 +0,0 @@
-import styled from "styled-components";
-import Button from "~/components/Button";
-import { hover } from "~/styles";
-import Flex from "../Flex";
-
-export const EmojiButton = styled(Button)`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-
-  &: ${hover},
-  &:active,
-  &[aria-expanded= "true"] {
-    opacity: 1 !important;
-  }
-`;
-
-export const Emoji = styled(Flex)<{ size?: number }>`
-  line-height: 1.6;
-  ${(props) => (props.size ? `font-size: ${props.size}px` : "")}
-`;

app/components/EmojiPicker/index.tsx

@@ -1,262 +0,0 @@
-import data from "@emoji-mart/data";
-import Picker from "@emoji-mart/react";
-import { SmileyIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
-import styled, { useTheme } from "styled-components";
-import { depths, s } from "@shared/styles";
-import { toRGB } from "@shared/utils/color";
-import Button from "~/components/Button";
-import Popover from "~/components/Popover";
-import useStores from "~/hooks/useStores";
-import useUserLocale from "~/hooks/useUserLocale";
-import { Emoji, EmojiButton } from "./components";
-
-/* Locales supported by emoji-mart */
-const supportedLocales = [
-  "en",
-  "ar",
-  "be",
-  "cs",
-  "de",
-  "es",
-  "fa",
-  "fi",
-  "fr",
-  "hi",
-  "it",
-  "ja",
-  "ko",
-  "nl",
-  "pl",
-  "pt",
-  "ru",
-  "sa",
-  "tr",
-  "uk",
-  "vi",
-  "zh",
-];
-
-/**
- * React hook to derive emoji picker's theme from UI theme
- *
- * @returns {string} Theme to use for emoji picker
- */
-function usePickerTheme(): string {
-  const { ui } = useStores();
-  const { theme } = ui;
-
-  if (theme === "system") {
-    return "auto";
-  }
-
-  return theme;
-}
-
-type Props = {
-  /** The selected emoji, if any */
-  value?: string | null;
-  /** Callback when an emoji is selected */
-  onChange: (emoji: string | null) => void | Promise<void>;
-  /** Callback when the picker is opened */
-  onOpen?: () => void;
-  /** Callback when the picker is closed */
-  onClose?: () => void;
-  /** Callback when the picker is clicked outside of */
-  onClickOutside: () => void;
-  /** Whether to auto focus the search input on open */
-  autoFocus?: boolean;
-  /** Class name to apply to the trigger button */
-  className?: string;
-};
-
-function EmojiPicker({
-  value,
-  onOpen,
-  onClose,
-  onChange,
-  onClickOutside,
-  autoFocus,
-  className,
-}: Props) {
-  const { t } = useTranslation();
-  const pickerTheme = usePickerTheme();
-  const theme = useTheme();
-  const locale = useUserLocale(true) ?? "en";
-
-  const popover = usePopoverState({
-    placement: "bottom-start",
-    modal: true,
-    unstable_offset: [0, 0],
-  });
-
-  const [emojisPerLine, setEmojisPerLine] = React.useState(9);
-
-  const pickerRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    if (popover.visible) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  }, [popover.visible, onOpen, onClose]);
-
-  React.useEffect(() => {
-    if (popover.visible && pickerRef.current) {
-      // 28 is picker's observed width when perLine is set to 0
-      // and 36 is the default emojiButtonSize
-      // Ref: https://github.com/missive/emoji-mart#options--props
-      setEmojisPerLine(Math.floor((pickerRef.current.clientWidth - 28) / 36));
-    }
-  }, [popover.visible]);
-
-  const handleEmojiChange = React.useCallback(
-    async (emoji) => {
-      popover.hide();
-      await onChange(emoji ? emoji.native : null);
-    },
-    [popover, onChange]
-  );
-
-  const handleClick = React.useCallback(
-    (ev: React.MouseEvent) => {
-      ev.stopPropagation();
-      if (popover.visible) {
-        popover.hide();
-      } else {
-        popover.show();
-      }
-    },
-    [popover]
-  );
-
-  const handleClickOutside = React.useCallback(() => {
-    // It was observed that onClickOutside got triggered
-    // even when the picker wasn't open or opened at all.
-    // Hence, this guard here...
-    if (popover.visible) {
-      onClickOutside();
-    }
-  }, [popover.visible, onClickOutside]);
-
-  // Auto focus search input when picker is opened
-  React.useLayoutEffect(() => {
-    if (autoFocus && popover.visible) {
-      requestAnimationFrame(() => {
-        const searchInput = pickerRef.current
-          ?.querySelector("em-emoji-picker")
-          ?.shadowRoot?.querySelector(
-            "input[type=search]"
-          ) as HTMLInputElement | null;
-        searchInput?.focus();
-      });
-    }
-  }, [autoFocus, popover.visible]);
-
-  return (
-    <>
-      <PopoverDisclosure {...popover}>
-        {(props) => (
-          <EmojiButton
-            {...props}
-            className={className}
-            onClick={handleClick}
-            icon={
-              value ? (
-                <Emoji size={32} align="center" justify="center">
-                  {value}
-                </Emoji>
-              ) : (
-                <StyledSmileyIcon size={32} color={theme.textTertiary} />
-              )
-            }
-            neutral
-            borderOnHover
-          />
-        )}
-      </PopoverDisclosure>
-      <PickerPopover
-        {...popover}
-        tabIndex={0}
-        // This prevents picker from closing when any of its
-        // children are focused, e.g, clicking on search bar or
-        // a click on skin tone button
-        onClick={(e) => e.stopPropagation()}
-        width={352}
-        aria-label={t("Emoji Picker")}
-      >
-        {popover.visible && (
-          <>
-            {value && (
-              <RemoveButton neutral onClick={() => handleEmojiChange(null)}>
-                {t("Remove")}
-              </RemoveButton>
-            )}
-            <PickerStyles ref={pickerRef}>
-              <Picker
-                locale={supportedLocales.includes(locale) ? locale : "en"}
-                data={data}
-                onEmojiSelect={handleEmojiChange}
-                theme={pickerTheme}
-                previewPosition="none"
-                perLine={emojisPerLine}
-                onClickOutside={handleClickOutside}
-              />
-            </PickerStyles>
-          </>
-        )}
-      </PickerPopover>
-    </>
-  );
-}
-
-const StyledSmileyIcon = styled(SmileyIcon)`
-  flex-shrink: 0;
-
-  @media print {
-    display: none;
-  }
-`;
-
-const RemoveButton = styled(Button)`
-  margin-left: -12px;
-  margin-bottom: 8px;
-  border-radius: 6px;
-  height: 24px;
-  font-size: 13px;
-
-  > :first-child {
-    min-height: unset;
-    line-height: unset;
-  }
-`;
-
-const PickerPopover = styled(Popover)`
-  z-index: ${depths.popover};
-  > :first-child {
-    padding-top: 8px;
-    padding-bottom: 0;
-    max-height: 488px;
-    overflow: unset;
-  }
-`;
-
-const PickerStyles = styled.div`
-  margin-left: -24px;
-  margin-right: -24px;
-  em-emoji-picker {
-    --shadow: none;
-    --font-family: ${s("fontFamily")};
-    --rgb-background: ${(props) => toRGB(props.theme.menuBackground)};
-    --rgb-accent: ${(props) => toRGB(props.theme.accent)};
-    --border-radius: 6px;
-    margin-left: auto;
-    margin-right: auto;
-    min-height: 443px;
-  }
-`;
-
-export default EmojiPicker;

app/components/EventListItem.tsx

@@ -11,16 +11,12 @@ import {
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import { CompositeStateReturn } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
 import Avatar from "~/components/Avatar";
-import CompositeItem, {
+import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
-  Props as ItemProps,
-} from "~/components/List/CompositeItem";
-import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
@@ -32,7 +28,7 @@ type Props = {
   document: Document;
   event: Event;
   latest?: boolean;
-} & CompositeStateReturn;
+};
 
 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
@@ -176,11 +172,7 @@ const BaseItem = React.forwardRef(function _BaseItem(
   { to, ...rest }: ItemProps,
   ref?: React.Ref<HTMLAnchorElement>
 ) {
-  if (to) {
+  return <ListItem to={to} ref={ref} {...rest} />;
-    return <CompositeListItem to={to} ref={ref} {...rest} />;
-  }
-
-  return <ListItem ref={ref} {...rest} />;
 });
 
 const Subtitle = styled.span`
@@ -240,8 +232,4 @@ const ListItem = styled(Item)`
   ${ItemStyle}
 `;
 
-const CompositeListItem = styled(CompositeItem)`
-  ${ItemStyle}
-`;
-
 export default observer(EventListItem);

app/components/HoverPreview/HoverPreviewDocument.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
+import { richExtensions } from "@shared/editor/nodes";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
+import ErrorBoundary from "../ErrorBoundary";
 import {
   Preview,
   Title,
@@ -21,20 +23,23 @@ const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
     <Preview to={url}>
       <Card ref={ref}>
         <CardContent>
-          <Flex column gap={2}>
+          <ErrorBoundary showTitle={false} reloadOnChunkMissing={false}>
-            <Title>{title}</Title>
+            <Flex column gap={2}>
-            <Info>{lastActivityByViewer}</Info>
+              <Title>{title}</Title>
-            <Description as="div">
+              <Info>{lastActivityByViewer}</Info>
-              <React.Suspense fallback={<div />}>
+              <Description as="div">
-                <Editor
+                <React.Suspense fallback={<div />}>
-                  key={id}
+                  <Editor
-                  defaultValue={summary}
+                    key={id}
-                  embedsDisabled
+                    extensions={richExtensions}
-                  readOnly
+                    defaultValue={summary}
-                />
+                    embedsDisabled
-              </React.Suspense>
+                    readOnly
-            </Description>
+                  />
-          </Flex>
+                </React.Suspense>
+              </Description>
+            </Flex>
+          </ErrorBoundary>
         </CardContent>
       </Card>
     </Preview>

app/components/Icon.tsx

@@ -0,0 +1,107 @@
+import { observer } from "mobx-react";
+import { getLuminance } from "polished";
+import * as React from "react";
+import { randomElement } from "@shared/random";
+import { IconType } from "@shared/types";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import { colorPalette } from "@shared/utils/collections";
+import { determineIconType } from "@shared/utils/icon";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
+import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
+
+export type Props = {
+  /** The icon to render */
+  value: string;
+  /** The color of the icon */
+  color?: string;
+  /** The size of the icon */
+  size?: number;
+  /** The initial to display if the icon is a letter icon */
+  initial?: string;
+  /** Optional additional class name */
+  className?: string;
+  /**
+   * Ensure the color does not change in response to theme and contrast. Should only be
+   * used in color picker UI.
+   */
+  forceColor?: boolean;
+};
+
+const Icon = ({
+  value: icon,
+  color,
+  size = 24,
+  initial,
+  forceColor,
+  className,
+}: Props) => {
+  const iconType = determineIconType(icon);
+
+  if (!iconType) {
+    Logger.warn("Failed to determine icon type", {
+      icon,
+    });
+    return null;
+  }
+
+  try {
+    if (iconType === IconType.SVG) {
+      return (
+        <SVGIcon
+          value={icon}
+          color={color}
+          size={size}
+          initial={initial}
+          className={className}
+          forceColor={forceColor}
+        />
+      );
+    }
+
+    return <EmojiIcon emoji={icon} size={size} className={className} />;
+  } catch (err) {
+    Logger.warn("Failed to render icon", {
+      icon,
+    });
+  }
+
+  return null;
+};
+
+const SVGIcon = observer(
+  ({
+    value: icon,
+    color: inputColor,
+    initial,
+    size,
+    className,
+    forceColor,
+  }: Props) => {
+    const { ui } = useStores();
+
+    let color = inputColor ?? randomElement(colorPalette);
+
+    // If the chosen icon color is very dark then we invert it in dark mode
+    if (!forceColor) {
+      if (ui.resolvedTheme === "dark" && color !== "currentColor") {
+        color = getLuminance(color) > 0.09 ? color : "currentColor";
+      }
+
+      // If the chosen icon color is very light then we invert it in light mode
+      if (ui.resolvedTheme === "light" && color !== "currentColor") {
+        color = getLuminance(color) < 0.9 ? color : "currentColor";
+      }
+    }
+
+    const Component = IconLibrary.getComponent(icon);
+
+    return (
+      <Component color={color} size={size} className={className}>
+        {initial}
+      </Component>
+    );
+  }
+);
+
+export default Icon;

app/components/IconPicker.tsx

@@ -1,211 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { PopoverDisclosure, usePopoverState } from "reakit";
-import { MenuItem } from "reakit/Menu";
-import styled, { useTheme } from "styled-components";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import { colorPalette } from "@shared/utils/collections";
-import Flex from "~/components/Flex";
-import NudeButton from "~/components/NudeButton";
-import Text from "~/components/Text";
-import useOnClickOutside from "~/hooks/useOnClickOutside";
-import lazyWithRetry from "~/utils/lazyWithRetry";
-import DelayedMount from "./DelayedMount";
-import InputSearch from "./InputSearch";
-import Popover from "./Popover";
-
-const icons = IconLibrary.mapping;
-
-const TwitterPicker = lazyWithRetry(
-  () => import("react-color/lib/components/twitter/Twitter")
-);
-
-type Props = {
-  onOpen?: () => void;
-  onClose?: () => void;
-  onChange: (color: string, icon: string) => void;
-  initial: string;
-  icon: string;
-  color: string;
-  className?: string;
-};
-
-function IconPicker({
-  onOpen,
-  onClose,
-  icon,
-  initial,
-  color,
-  onChange,
-  className,
-}: Props) {
-  const [query, setQuery] = React.useState("");
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const popover = usePopoverState({
-    gutter: 0,
-    placement: "right",
-    modal: true,
-  });
-
-  React.useEffect(() => {
-    if (popover.visible) {
-      onOpen?.();
-    } else {
-      onClose?.();
-      setQuery("");
-    }
-  }, [onOpen, onClose, popover.visible]);
-
-  const filteredIcons = IconLibrary.findIcons(query);
-  const handleFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value.toLowerCase());
-  };
-
-  const styles = React.useMemo(
-    () => ({
-      default: {
-        body: {
-          padding: 0,
-          marginRight: -8,
-        },
-        hash: {
-          color: theme.text,
-          background: theme.inputBorder,
-        },
-        swatch: {
-          cursor: "var(--cursor-pointer)",
-        },
-        input: {
-          color: theme.text,
-          boxShadow: `inset 0 0 0 1px ${theme.inputBorder}`,
-          background: "transparent",
-        },
-      },
-    }),
-    [theme]
-  );
-
-  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
-  // prevent event bubbling.
-  useOnClickOutside(
-    popover.unstable_popoverRef,
-    (event) => {
-      if (popover.visible) {
-        event.stopPropagation();
-        event.preventDefault();
-        popover.hide();
-      }
-    },
-    { capture: true }
-  );
-
-  const iconNames = Object.keys(icons);
-  const delayPerIcon = 250 / iconNames.length;
-
-  return (
-    <>
-      <PopoverDisclosure {...popover}>
-        {(props) => (
-          <NudeButton
-            aria-label={t("Show menu")}
-            className={className}
-            {...props}
-          >
-            <Icon
-              as={IconLibrary.getComponent(icon || "collection")}
-              color={color}
-            >
-              {initial}
-            </Icon>
-          </NudeButton>
-        )}
-      </PopoverDisclosure>
-      <Popover
-        {...popover}
-        width={552}
-        aria-label={t("Choose an icon")}
-        hideOnClickOutside={false}
-      >
-        <Flex column gap={12}>
-          <Text size="large" weight="xbold">
-            {t("Choose an icon")}
-          </Text>
-          <InputSearch
-            value={query}
-            placeholder={`${t("Filter")}…`}
-            onChange={handleFilter}
-            autoFocus
-          />
-          <div>
-            {iconNames.map((name, index) => (
-              <MenuItem key={name} onClick={() => onChange(color, name)}>
-                {(props) => (
-                  <IconButton
-                    style={
-                      {
-                        opacity: query
-                          ? filteredIcons.includes(name)
-                            ? 1
-                            : 0.3
-                          : undefined,
-                        "--delay": `${Math.round(index * delayPerIcon)}ms`,
-                      } as React.CSSProperties
-                    }
-                    {...props}
-                  >
-                    <Icon
-                      as={IconLibrary.getComponent(name)}
-                      color={color}
-                      size={30}
-                    >
-                      {initial}
-                    </Icon>
-                  </IconButton>
-                )}
-              </MenuItem>
-            ))}
-          </div>
-          <Flex>
-            <React.Suspense
-              fallback={
-                <DelayedMount>
-                  <Text>{t("Loading")}…</Text>
-                </DelayedMount>
-              }
-            >
-              <ColorPicker
-                color={color}
-                onChange={(color) => onChange(color.hex, icon)}
-                colors={colorPalette}
-                triangle="hide"
-                styles={styles}
-              />
-            </React.Suspense>
-          </Flex>
-        </Flex>
-      </Popover>
-    </>
-  );
-}
-
-const Icon = styled.svg`
-  transition: color 150ms ease-in-out, fill 150ms ease-in-out;
-  transition-delay: var(--delay);
-`;
-
-const IconButton = styled(NudeButton)`
-  vertical-align: top;
-  border-radius: 4px;
-  margin: 0px 6px 6px 0px;
-  width: 30px;
-  height: 30px;
-`;
-
-const ColorPicker = styled(TwitterPicker)`
-  box-shadow: none !important;
-  background: transparent !important;
-  width: 100% !important;
-`;
-
-export default IconPicker;

app/components/IconPicker/components/ColorPicker.tsx

@@ -0,0 +1,218 @@
+import { BackIcon } from "outline-icons";
+import React from "react";
+import styled from "styled-components";
+import { breakpoints, s } from "@shared/styles";
+import { colorPalette } from "@shared/utils/collections";
+import { validateColorHex } from "@shared/utils/color";
+import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
+import Text from "~/components/Text";
+import { hover } from "~/styles";
+
+enum Panel {
+  Builtin,
+  Hex,
+}
+
+type Props = {
+  width: number;
+  activeColor: string;
+  onSelect: (color: string) => void;
+};
+
+const ColorPicker = ({ width, activeColor, onSelect }: Props) => {
+  const [localValue, setLocalValue] = React.useState(activeColor);
+
+  const [panel, setPanel] = React.useState(
+    colorPalette.includes(activeColor) ? Panel.Builtin : Panel.Hex
+  );
+
+  const handleSwitcherClick = React.useCallback(() => {
+    setPanel(panel === Panel.Builtin ? Panel.Hex : Panel.Builtin);
+  }, [panel, setPanel]);
+
+  const isLargeMobile = width > breakpoints.mobileLarge + 12; // 12px for the Container padding
+
+  React.useEffect(() => {
+    setLocalValue(activeColor);
+    setPanel(colorPalette.includes(activeColor) ? Panel.Builtin : Panel.Hex);
+  }, [activeColor]);
+
+  return isLargeMobile ? (
+    <Container justify="space-between">
+      <LargeMobileBuiltinColors activeColor={activeColor} onClick={onSelect} />
+      <LargeMobileCustomColor
+        value={localValue}
+        setLocalValue={setLocalValue}
+        onValidHex={onSelect}
+      />
+    </Container>
+  ) : (
+    <Container gap={12}>
+      <PanelSwitcher align="center">
+        <SwitcherButton panel={panel} onClick={handleSwitcherClick}>
+          {panel === Panel.Builtin ? "#" : <BackIcon />}
+        </SwitcherButton>
+      </PanelSwitcher>
+      {panel === Panel.Builtin ? (
+        <BuiltinColors activeColor={activeColor} onClick={onSelect} />
+      ) : (
+        <CustomColor
+          value={localValue}
+          setLocalValue={setLocalValue}
+          onValidHex={onSelect}
+        />
+      )}
+    </Container>
+  );
+};
+
+const BuiltinColors = ({
+  activeColor,
+  onClick,
+  className,
+}: {
+  activeColor: string;
+  onClick: (color: string) => void;
+  className?: string;
+}) => (
+  <Flex className={className} justify="space-between" align="center" auto>
+    {colorPalette.map((color) => (
+      <ColorButton
+        key={color}
+        color={color}
+        active={color === activeColor}
+        onClick={() => onClick(color)}
+      >
+        <Selected />
+      </ColorButton>
+    ))}
+  </Flex>
+);
+
+const CustomColor = ({
+  value,
+  setLocalValue,
+  onValidHex,
+  className,
+}: {
+  value: string;
+  setLocalValue: (value: string) => void;
+  onValidHex: (color: string) => void;
+  className?: string;
+}) => {
+  const hasHexChars = React.useCallback(
+    (color: string) => /(^#[0-9A-F]{1,6}$)/i.test(color),
+    []
+  );
+
+  const handleInputChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      const val = ev.target.value;
+
+      if (val === "" || val === "#") {
+        setLocalValue("#");
+        return;
+      }
+
+      const uppercasedVal = val.toUpperCase();
+
+      if (hasHexChars(uppercasedVal)) {
+        setLocalValue(uppercasedVal);
+      }
+
+      if (validateColorHex(uppercasedVal)) {
+        onValidHex(uppercasedVal);
+      }
+    },
+    [setLocalValue, hasHexChars, onValidHex]
+  );
+
+  return (
+    <Flex className={className} align="center" gap={8}>
+      <Text type="tertiary" size="small">
+        HEX
+      </Text>
+      <CustomColorInput
+        maxLength={7}
+        value={value}
+        onChange={handleInputChange}
+      />
+    </Flex>
+  );
+};
+
+const Container = styled(Flex)`
+  height: 48px;
+  padding: 8px 12px;
+  border-bottom: 1px solid ${s("inputBorder")};
+`;
+
+const Selected = styled.span`
+  width: 10px;
+  height: 5px;
+  border-left: 2px solid white;
+  border-bottom: 2px solid white;
+  transform: translateY(-25%) rotate(-45deg);
+`;
+
+const ColorButton = styled(NudeButton)<{ color: string; active: boolean }>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: ${({ color }) => color};
+
+  &: ${hover} {
+    outline: 2px solid ${s("menuBackground")} !important;
+    box-shadow: ${({ color }) => `0px 0px 3px 3px ${color}`};
+  }
+
+  & ${Selected} {
+    display: ${({ active }) => (active ? "block" : "none")};
+  }
+`;
+
+const PanelSwitcher = styled(Flex)`
+  width: 40px;
+  border-right: 1px solid ${s("inputBorder")};
+`;
+
+const SwitcherButton = styled(NudeButton)<{ panel: Panel }>`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  border: 1px solid ${s("inputBorder")};
+  transition: all 100ms ease-in-out;
+
+  &: ${hover} {
+    border-color: ${s("inputBorderFocused")};
+  }
+`;
+
+const LargeMobileBuiltinColors = styled(BuiltinColors)`
+  max-width: 380px;
+  padding-right: 8px;
+`;
+
+const LargeMobileCustomColor = styled(CustomColor)`
+  padding-left: 8px;
+  border-left: 1px solid ${s("inputBorder")};
+  width: 120px;
+`;
+
+const CustomColorInput = styled.input.attrs(() => ({
+  type: "text",
+  autocomplete: "off",
+}))`
+  font-size: 14px;
+  color: ${s("textSecondary")};
+  background: transparent;
+  border: 0;
+  outline: 0;
+`;
+
+export default ColorPicker;

app/components/IconPicker/components/Emoji.tsx

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+export const Emoji = styled.span`
+  font-family: ${s("fontFamilyEmoji")};
+  width: 24px;
+  height: 24px;
+`;

app/components/IconPicker/components/EmojiPanel.tsx

@@ -0,0 +1,245 @@
+import concat from "lodash/concat";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { EmojiCategory, EmojiSkinTone, IconType } from "@shared/types";
+import { getEmojis, getEmojisWithCategory, search } from "@shared/utils/emoji";
+import Flex from "~/components/Flex";
+import InputSearch from "~/components/InputSearch";
+import usePersistedState from "~/hooks/usePersistedState";
+import {
+  FREQUENTLY_USED_COUNT,
+  DisplayCategory,
+  emojiSkinToneKey,
+  emojisFreqKey,
+  lastEmojiKey,
+  sortFrequencies,
+} from "../utils";
+import GridTemplate, { DataNode } from "./GridTemplate";
+import SkinTonePicker from "./SkinTonePicker";
+
+/**
+ * This is needed as a constant for react-window.
+ * Calculated from the heights of TabPanel and InputSearch.
+ */
+const GRID_HEIGHT = 362;
+
+const useEmojiState = () => {
+  const [emojiSkinTone, setEmojiSkinTone] = usePersistedState<EmojiSkinTone>(
+    emojiSkinToneKey,
+    EmojiSkinTone.Default
+  );
+  const [emojisFreq, setEmojisFreq] = usePersistedState<Record<string, number>>(
+    emojisFreqKey,
+    {}
+  );
+  const [lastEmoji, setLastEmoji] = usePersistedState<string | undefined>(
+    lastEmojiKey,
+    undefined
+  );
+
+  const incrementEmojiCount = React.useCallback(
+    (emoji: string) => {
+      emojisFreq[emoji] = (emojisFreq[emoji] ?? 0) + 1;
+      setEmojisFreq({ ...emojisFreq });
+      setLastEmoji(emoji);
+    },
+    [emojisFreq, setEmojisFreq, setLastEmoji]
+  );
+
+  const getFreqEmojis = React.useCallback(() => {
+    const freqs = Object.entries(emojisFreq);
+
+    if (freqs.length > FREQUENTLY_USED_COUNT.Track) {
+      sortFrequencies(freqs).splice(FREQUENTLY_USED_COUNT.Track);
+      setEmojisFreq(Object.fromEntries(freqs));
+    }
+
+    const emojis = sortFrequencies(freqs)
+      .slice(0, FREQUENTLY_USED_COUNT.Get)
+      .map(([emoji, _]) => emoji);
+
+    const isLastPresent = emojis.includes(lastEmoji ?? "");
+    if (lastEmoji && !isLastPresent) {
+      emojis.pop();
+      emojis.push(lastEmoji);
+    }
+
+    return emojis;
+  }, [emojisFreq, setEmojisFreq, lastEmoji]);
+
+  return {
+    emojiSkinTone,
+    setEmojiSkinTone,
+    incrementEmojiCount,
+    getFreqEmojis,
+  };
+};
+
+type Props = {
+  panelWidth: number;
+  query: string;
+  panelActive: boolean;
+  onEmojiChange: (emoji: string) => void;
+  onQueryChange: (query: string) => void;
+};
+
+const EmojiPanel = ({
+  panelWidth,
+  query,
+  panelActive,
+  onEmojiChange,
+  onQueryChange,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const searchRef = React.useRef<HTMLInputElement | null>(null);
+  const scrollableRef = React.useRef<HTMLDivElement | null>(null);
+
+  const {
+    emojiSkinTone: skinTone,
+    setEmojiSkinTone,
+    incrementEmojiCount,
+    getFreqEmojis,
+  } = useEmojiState();
+
+  const freqEmojis = React.useMemo(() => getFreqEmojis(), [getFreqEmojis]);
+
+  const handleFilter = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onQueryChange(event.target.value);
+    },
+    [onQueryChange]
+  );
+
+  const handleSkinChange = React.useCallback(
+    (emojiSkinTone: EmojiSkinTone) => {
+      setEmojiSkinTone(emojiSkinTone);
+    },
+    [setEmojiSkinTone]
+  );
+
+  const handleEmojiSelection = React.useCallback(
+    ({ id, value }: { id: string; value: string }) => {
+      onEmojiChange(value);
+      incrementEmojiCount(id);
+    },
+    [onEmojiChange, incrementEmojiCount]
+  );
+
+  const isSearch = query !== "";
+  const templateData: DataNode[] = isSearch
+    ? getSearchResults({
+        query,
+        skinTone,
+      })
+    : getAllEmojis({
+        skinTone,
+        freqEmojis,
+      });
+
+  React.useEffect(() => {
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTop = 0;
+    }
+    searchRef.current?.focus();
+  }, [panelActive]);
+
+  return (
+    <Flex column>
+      <UserInputContainer align="center" gap={12}>
+        <StyledInputSearch
+          ref={searchRef}
+          value={query}
+          placeholder={`${t("Search emoji")}…`}
+          onChange={handleFilter}
+        />
+        <SkinTonePicker skinTone={skinTone} onChange={handleSkinChange} />
+      </UserInputContainer>
+      <GridTemplate
+        ref={scrollableRef}
+        width={panelWidth}
+        height={GRID_HEIGHT}
+        data={templateData}
+        onIconSelect={handleEmojiSelection}
+      />
+    </Flex>
+  );
+};
+
+const getSearchResults = ({
+  query,
+  skinTone,
+}: {
+  query: string;
+  skinTone: EmojiSkinTone;
+}): DataNode[] => {
+  const emojis = search({ query, skinTone });
+  return [
+    {
+      category: DisplayCategory.Search,
+      icons: emojis.map((emoji) => ({
+        type: IconType.Emoji,
+        id: emoji.id,
+        value: emoji.value,
+      })),
+    },
+  ];
+};
+
+const getAllEmojis = ({
+  skinTone,
+  freqEmojis,
+}: {
+  skinTone: EmojiSkinTone;
+  freqEmojis: string[];
+}): DataNode[] => {
+  const emojisWithCategory = getEmojisWithCategory({ skinTone });
+
+  const getFrequentEmojis = (): DataNode => {
+    const emojis = getEmojis({ ids: freqEmojis, skinTone });
+    return {
+      category: DisplayCategory.Frequent,
+      icons: emojis.map((emoji) => ({
+        type: IconType.Emoji,
+        id: emoji.id,
+        value: emoji.value,
+      })),
+    };
+  };
+
+  const getCategoryData = (emojiCategory: EmojiCategory): DataNode => {
+    const emojis = emojisWithCategory[emojiCategory] ?? [];
+    return {
+      category: emojiCategory,
+      icons: emojis.map((emoji) => ({
+        type: IconType.Emoji,
+        id: emoji.id,
+        value: emoji.value,
+      })),
+    };
+  };
+
+  return concat(
+    getFrequentEmojis(),
+    getCategoryData(EmojiCategory.People),
+    getCategoryData(EmojiCategory.Nature),
+    getCategoryData(EmojiCategory.Foods),
+    getCategoryData(EmojiCategory.Activity),
+    getCategoryData(EmojiCategory.Places),
+    getCategoryData(EmojiCategory.Objects),
+    getCategoryData(EmojiCategory.Symbols),
+    getCategoryData(EmojiCategory.Flags)
+  );
+};
+
+const UserInputContainer = styled(Flex)`
+  height: 48px;
+  padding: 6px 12px 0px;
+`;
+
+const StyledInputSearch = styled(InputSearch)`
+  flex-grow: 1;
+`;
+
+export default EmojiPanel;

app/components/IconPicker/components/Grid.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { FixedSizeList, ListChildComponentProps } from "react-window";
+import styled from "styled-components";
+
+type Props = {
+  width: number;
+  height: number;
+  data: React.ReactNode[][];
+  columns: number;
+  itemWidth: number;
+};
+
+const Grid = (
+  { width, height, data, columns, itemWidth }: Props,
+  ref: React.Ref<HTMLDivElement>
+) => (
+  <Container
+    outerRef={ref}
+    width={width}
+    height={height}
+    itemCount={data.length}
+    itemSize={itemWidth}
+    itemData={{ data, columns }}
+  >
+    {Row}
+  </Container>
+);
+
+type RowProps = {
+  data: React.ReactNode[][];
+  columns: number;
+};
+
+const Row = ({ index, style, data }: ListChildComponentProps<RowProps>) => {
+  const { data: rows, columns } = data;
+  const row = rows[index];
+
+  return (
+    <RowContainer style={style} columns={columns}>
+      {row}
+    </RowContainer>
+  );
+};
+
+const Container = styled(FixedSizeList<RowProps>)`
+  padding: 0px 12px;
+
+  // Needed for the absolutely positioned children
+  // to respect the VirtualList's padding
+  & > div {
+    position: relative;
+  }
+`;
+
+const RowContainer = styled.div<{ columns: number }>`
+  display: grid;
+  grid-template-columns: ${({ columns }) => `repeat(${columns}, 1fr)`};
+  align-content: center;
+`;
+
+export default React.forwardRef(Grid);

app/components/IconPicker/components/GridTemplate.tsx

@@ -0,0 +1,120 @@
+import chunk from "lodash/chunk";
+import compact from "lodash/compact";
+import React from "react";
+import styled from "styled-components";
+import { IconType } from "@shared/types";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import Text from "~/components/Text";
+import { TRANSLATED_CATEGORIES } from "../utils";
+import { Emoji } from "./Emoji";
+import Grid from "./Grid";
+import { IconButton } from "./IconButton";
+
+/**
+ * icon/emoji size is 24px; and we add 4px padding on all sides,
+ */
+const BUTTON_SIZE = 32;
+
+type OutlineNode = {
+  type: IconType.SVG;
+  name: string;
+  color: string;
+  initial: string;
+  delay: number;
+};
+
+type EmojiNode = {
+  type: IconType.Emoji;
+  id: string;
+  value: string;
+};
+
+export type DataNode = {
+  category: keyof typeof TRANSLATED_CATEGORIES;
+  icons: (OutlineNode | EmojiNode)[];
+};
+
+type Props = {
+  width: number;
+  height: number;
+  data: DataNode[];
+  onIconSelect: ({ id, value }: { id: string; value: string }) => void;
+};
+
+const GridTemplate = (
+  { width, height, data, onIconSelect }: Props,
+  ref: React.Ref<HTMLDivElement>
+) => {
+  // 24px padding for the Grid Container
+  const itemsPerRow = Math.floor((width - 24) / BUTTON_SIZE);
+
+  const gridItems = compact(
+    data.flatMap((node) => {
+      if (node.icons.length === 0) {
+        return [];
+      }
+
+      const category = (
+        <CategoryName
+          key={node.category}
+          type="tertiary"
+          size="xsmall"
+          weight="bold"
+        >
+          {TRANSLATED_CATEGORIES[node.category]}
+        </CategoryName>
+      );
+
+      const items = node.icons.map((item) => {
+        if (item.type === IconType.SVG) {
+          return (
+            <IconButton
+              key={item.name}
+              onClick={() => onIconSelect({ id: item.name, value: item.name })}
+              delay={item.delay}
+            >
+              <Icon as={IconLibrary.getComponent(item.name)} color={item.color}>
+                {item.initial}
+              </Icon>
+            </IconButton>
+          );
+        }
+
+        return (
+          <IconButton
+            key={item.id}
+            onClick={() => onIconSelect({ id: item.id, value: item.value })}
+          >
+            <Emoji>{item.value}</Emoji>
+          </IconButton>
+        );
+      });
+
+      const chunks = chunk(items, itemsPerRow);
+      return [[category], ...chunks];
+    })
+  );
+
+  return (
+    <Grid
+      ref={ref}
+      width={width}
+      height={height}
+      data={gridItems}
+      columns={itemsPerRow}
+      itemWidth={BUTTON_SIZE}
+    />
+  );
+};
+
+const CategoryName = styled(Text)`
+  grid-column: 1 / -1;
+  padding-left: 6px;
+`;
+
+const Icon = styled.svg`
+  transition: color 150ms ease-in-out, fill 150ms ease-in-out;
+  transition-delay: var(--delay);
+`;
+
+export default React.forwardRef(GridTemplate);

app/components/IconPicker/components/IconButton.tsx

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
+
+export const IconButton = styled(NudeButton)<{ delay?: number }>`
+  width: 32px;
+  height: 32px;
+  padding: 4px;
+  --delay: ${({ delay }) => delay && `${delay}ms`};
+
+  &: ${hover} {
+    background: ${s("listItemHoverBackground")};
+  }
+`;

app/components/IconPicker/components/IconPanel.tsx

@@ -0,0 +1,200 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { IconType } from "@shared/types";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import Flex from "~/components/Flex";
+import InputSearch from "~/components/InputSearch";
+import usePersistedState from "~/hooks/usePersistedState";
+import {
+  FREQUENTLY_USED_COUNT,
+  DisplayCategory,
+  iconsFreqKey,
+  lastIconKey,
+  sortFrequencies,
+} from "../utils";
+import ColorPicker from "./ColorPicker";
+import GridTemplate, { DataNode } from "./GridTemplate";
+
+const IconNames = Object.keys(IconLibrary.mapping);
+const TotalIcons = IconNames.length;
+
+/**
+ * This is needed as a constant for react-window.
+ * Calculated from the heights of TabPanel, ColorPicker and InputSearch.
+ */
+const GRID_HEIGHT = 314;
+
+const useIconState = () => {
+  const [iconsFreq, setIconsFreq] = usePersistedState<Record<string, number>>(
+    iconsFreqKey,
+    {}
+  );
+  const [lastIcon, setLastIcon] = usePersistedState<string | undefined>(
+    lastIconKey,
+    undefined
+  );
+
+  const incrementIconCount = React.useCallback(
+    (icon: string) => {
+      iconsFreq[icon] = (iconsFreq[icon] ?? 0) + 1;
+      setIconsFreq({ ...iconsFreq });
+      setLastIcon(icon);
+    },
+    [iconsFreq, setIconsFreq, setLastIcon]
+  );
+
+  const getFreqIcons = React.useCallback(() => {
+    const freqs = Object.entries(iconsFreq);
+
+    if (freqs.length > FREQUENTLY_USED_COUNT.Track) {
+      sortFrequencies(freqs).splice(FREQUENTLY_USED_COUNT.Track);
+      setIconsFreq(Object.fromEntries(freqs));
+    }
+
+    const icons = sortFrequencies(freqs)
+      .slice(0, FREQUENTLY_USED_COUNT.Get)
+      .map(([icon, _]) => icon);
+
+    const isLastPresent = icons.includes(lastIcon ?? "");
+    if (lastIcon && !isLastPresent) {
+      icons.pop();
+      icons.push(lastIcon);
+    }
+
+    return icons;
+  }, [iconsFreq, setIconsFreq, lastIcon]);
+
+  return {
+    incrementIconCount,
+    getFreqIcons,
+  };
+};
+
+type Props = {
+  panelWidth: number;
+  initial: string;
+  color: string;
+  query: string;
+  panelActive: boolean;
+  onIconChange: (icon: string) => void;
+  onColorChange: (icon: string) => void;
+  onQueryChange: (query: string) => void;
+};
+
+const IconPanel = ({
+  panelWidth,
+  initial,
+  color,
+  query,
+  panelActive,
+  onIconChange,
+  onColorChange,
+  onQueryChange,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const searchRef = React.useRef<HTMLInputElement | null>(null);
+  const scrollableRef = React.useRef<HTMLDivElement | null>(null);
+
+  const { incrementIconCount, getFreqIcons } = useIconState();
+
+  const freqIcons = React.useMemo(() => getFreqIcons(), [getFreqIcons]);
+  const totalFreqIcons = freqIcons.length;
+
+  const filteredIcons = React.useMemo(
+    () => IconLibrary.findIcons(query),
+    [query]
+  );
+
+  const isSearch = query !== "";
+  const category = isSearch ? DisplayCategory.Search : DisplayCategory.All;
+  const delayPerIcon = 250 / (TotalIcons + totalFreqIcons);
+
+  const handleFilter = React.useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onQueryChange(event.target.value);
+    },
+    [onQueryChange]
+  );
+
+  const handleIconSelection = React.useCallback(
+    ({ id, value }: { id: string; value: string }) => {
+      onIconChange(value);
+      incrementIconCount(id);
+    },
+    [onIconChange, incrementIconCount]
+  );
+
+  const baseIcons: DataNode = {
+    category,
+    icons: filteredIcons.map((name, index) => ({
+      type: IconType.SVG,
+      name,
+      color,
+      initial,
+      delay: Math.round((index + totalFreqIcons) * delayPerIcon),
+      onClick: handleIconSelection,
+    })),
+  };
+
+  const templateData: DataNode[] = isSearch
+    ? [baseIcons]
+    : [
+        {
+          category: DisplayCategory.Frequent,
+          icons: freqIcons.map((name, index) => ({
+            type: IconType.SVG,
+            name,
+            color,
+            initial,
+            delay: Math.round((index + totalFreqIcons) * delayPerIcon),
+            onClick: handleIconSelection,
+          })),
+        },
+        baseIcons,
+      ];
+
+  React.useEffect(() => {
+    if (scrollableRef.current) {
+      scrollableRef.current.scrollTop = 0;
+    }
+    searchRef.current?.focus();
+  }, [panelActive]);
+
+  return (
+    <Flex column>
+      <InputSearchContainer align="center">
+        <StyledInputSearch
+          ref={searchRef}
+          value={query}
+          placeholder={`${t("Search icons")}…`}
+          onChange={handleFilter}
+        />
+      </InputSearchContainer>
+      <ColorPicker
+        width={panelWidth}
+        activeColor={color}
+        onSelect={onColorChange}
+      />
+      <GridTemplate
+        ref={scrollableRef}
+        width={panelWidth}
+        height={GRID_HEIGHT}
+        data={templateData}
+        onIconSelect={handleIconSelection}
+      />
+    </Flex>
+  );
+};
+
+const InputSearchContainer = styled(Flex)`
+  height: 48px;
+  padding: 6px 12px 0px;
+`;
+
+const StyledInputSearch = styled(InputSearch)`
+  flex-grow: 1;
+`;
+
+export default IconPanel;

app/components/IconPicker/components/PopoverButton.tsx

@@ -0,0 +1,20 @@
+import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
+import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
+
+export const PopoverButton = styled(NudeButton)<{ $borderOnHover?: boolean }>`
+  &: ${hover},
+  &:active,
+  &[aria-expanded= "true"] {
+    opacity: 1 !important;
+
+    ${({ $borderOnHover }) =>
+      $borderOnHover &&
+      css`
+        background: ${s("buttonNeutralBackground")};
+        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px,
+          ${s("buttonNeutralBorder")} 0 0 0 1px inset;
+      `};
+  }
+`;

app/components/IconPicker/components/SkinTonePicker.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Menu, MenuButton, MenuItem, useMenuState } from "reakit";
+import styled from "styled-components";
+import { depths, s } from "@shared/styles";
+import { EmojiSkinTone } from "@shared/types";
+import { getEmojiVariants } from "@shared/utils/emoji";
+import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
+import { Emoji } from "./Emoji";
+import { IconButton } from "./IconButton";
+
+const SkinTonePicker = ({
+  skinTone,
+  onChange,
+}: {
+  skinTone: EmojiSkinTone;
+  onChange: (skin: EmojiSkinTone) => void;
+}) => {
+  const { t } = useTranslation();
+
+  const handEmojiVariants = React.useMemo(
+    () => getEmojiVariants({ id: "hand" }),
+    []
+  );
+
+  const menu = useMenuState({
+    placement: "bottom",
+  });
+
+  const handleSkinClick = React.useCallback(
+    (emojiSkin) => {
+      menu.hide();
+      onChange(emojiSkin);
+    },
+    [menu, onChange]
+  );
+
+  const menuItems = React.useMemo(
+    () =>
+      Object.entries(handEmojiVariants).map(([eskin, emoji]) => (
+        <MenuItem {...menu} key={emoji.value}>
+          {(menuprops) => (
+            <IconButton {...menuprops} onClick={() => handleSkinClick(eskin)}>
+              <Emoji>{emoji.value}</Emoji>
+            </IconButton>
+          )}
+        </MenuItem>
+      )),
+    [menu, handEmojiVariants, handleSkinClick]
+  );
+
+  return (
+    <>
+      <MenuButton {...menu}>
+        {(props) => (
+          <StyledMenuButton
+            {...props}
+            aria-label={t("Choose default skin tone")}
+          >
+            {handEmojiVariants[skinTone]!.value}
+          </StyledMenuButton>
+        )}
+      </MenuButton>
+      <Menu {...menu} aria-label={t("Choose default skin tone")}>
+        {(props) => <MenuContainer {...props}>{menuItems}</MenuContainer>}
+      </Menu>
+    </>
+  );
+};
+
+const MenuContainer = styled(Flex)`
+  z-index: ${depths.menu};
+  padding: 4px;
+  border-radius: 4px;
+  background: ${s("menuBackground")};
+  box-shadow: ${s("menuShadow")};
+`;
+
+const StyledMenuButton = styled(NudeButton)`
+  width: 32px;
+  height: 32px;
+  border: 1px solid ${s("inputBorder")};
+  padding: 4px;
+
+  &: ${hover} {
+    border: 1px solid ${s("inputBorderFocused")};
+  }
+`;
+
+export default SkinTonePicker;

app/components/IconPicker/index.tsx

@@ -0,0 +1,312 @@
+import { SmileyIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  PopoverDisclosure,
+  Tab,
+  TabList,
+  TabPanel,
+  usePopoverState,
+  useTabState,
+} from "reakit";
+import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
+import theme from "@shared/styles/theme";
+import { IconType } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
+import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
+import NudeButton from "~/components/NudeButton";
+import Popover from "~/components/Popover";
+import useMobile from "~/hooks/useMobile";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
+import usePrevious from "~/hooks/usePrevious";
+import useWindowSize from "~/hooks/useWindowSize";
+import { hover } from "~/styles";
+import EmojiPanel from "./components/EmojiPanel";
+import IconPanel from "./components/IconPanel";
+import { PopoverButton } from "./components/PopoverButton";
+
+const TAB_NAMES = {
+  Icon: "icon",
+  Emoji: "emoji",
+} as const;
+
+const POPOVER_WIDTH = 408;
+
+type Props = {
+  icon: string | null;
+  color: string;
+  size?: number;
+  initial?: string;
+  className?: string;
+  popoverPosition: "bottom-start" | "right";
+  allowDelete?: boolean;
+  borderOnHover?: boolean;
+  onChange: (icon: string | null, color: string | null) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+};
+
+const IconPicker = ({
+  icon,
+  color,
+  size = 24,
+  initial,
+  className,
+  popoverPosition,
+  allowDelete,
+  onChange,
+  onOpen,
+  onClose,
+  borderOnHover,
+}: Props) => {
+  const { t } = useTranslation();
+
+  const { width: windowWidth } = useWindowSize();
+  const isMobile = useMobile();
+
+  const [query, setQuery] = React.useState("");
+  const [chosenColor, setChosenColor] = React.useState(color);
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+  const iconType = determineIconType(icon);
+  const defaultTab = React.useMemo(
+    () =>
+      iconType === IconType.Emoji ? TAB_NAMES["Emoji"] : TAB_NAMES["Icon"],
+    [iconType]
+  );
+
+  const popover = usePopoverState({
+    placement: popoverPosition,
+    modal: true,
+    unstable_offset: [0, 0],
+  });
+  const tab = useTabState({ selectedId: defaultTab });
+  const previouslyVisible = usePrevious(popover.visible);
+
+  const popoverWidth = isMobile ? windowWidth : POPOVER_WIDTH;
+  // In mobile, popover is absolutely positioned to leave 8px on both sides.
+  const panelWidth = isMobile ? windowWidth - 16 : popoverWidth;
+
+  const resetDefaultTab = React.useCallback(() => {
+    tab.select(defaultTab);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [defaultTab]);
+
+  const handleIconChange = React.useCallback(
+    (ic: string) => {
+      popover.hide();
+      const icType = determineIconType(ic);
+      const finalColor = icType === IconType.SVG ? chosenColor : null;
+      onChange(ic, finalColor);
+    },
+    [popover, onChange, chosenColor]
+  );
+
+  const handleIconColorChange = React.useCallback(
+    (c: string) => {
+      setChosenColor(c);
+
+      const icType = determineIconType(icon);
+      // Outline icon set; propagate color change
+      if (icType === IconType.SVG) {
+        onChange(icon, c);
+      }
+    },
+    [icon, onChange]
+  );
+
+  const handleIconRemove = React.useCallback(() => {
+    popover.hide();
+    onChange(null, null);
+  }, [popover, onChange]);
+
+  const handlePopoverButtonClick = React.useCallback(
+    (ev: React.MouseEvent) => {
+      ev.stopPropagation();
+      if (popover.visible) {
+        popover.hide();
+      } else {
+        popover.show();
+      }
+    },
+    [popover]
+  );
+
+  // Popover open effect
+  React.useEffect(() => {
+    if (popover.visible && !previouslyVisible) {
+      onOpen?.();
+    } else if (!popover.visible && previouslyVisible) {
+      onClose?.();
+      setQuery("");
+      resetDefaultTab();
+    }
+  }, [popover.visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);
+
+  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
+  // prevent event bubbling.
+  useOnClickOutside(
+    contentRef,
+    (event) => {
+      if (
+        popover.visible &&
+        !popover.unstable_disclosureRef.current?.contains(event.target as Node)
+      ) {
+        event.stopPropagation();
+        event.preventDefault();
+        popover.hide();
+      }
+    },
+    { capture: true }
+  );
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <PopoverButton
+            {...props}
+            aria-label={t("Show menu")}
+            className={className}
+            size={size}
+            onClick={handlePopoverButtonClick}
+            $borderOnHover={borderOnHover}
+          >
+            {iconType && icon ? (
+              <Icon value={icon} color={color} size={size} initial={initial} />
+            ) : (
+              <StyledSmileyIcon color={theme.textTertiary} size={size} />
+            )}
+          </PopoverButton>
+        )}
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
+        ref={contentRef}
+        width={popoverWidth}
+        shrink
+        aria-label={t("Icon Picker")}
+        onClick={(e) => e.stopPropagation()}
+        hideOnClickOutside={false}
+      >
+        <>
+          <TabActionsWrapper justify="space-between" align="center">
+            <TabList {...tab}>
+              <StyledTab
+                {...tab}
+                id={TAB_NAMES["Icon"]}
+                aria-label={t("Icons")}
+                active={tab.selectedId === TAB_NAMES["Icon"]}
+              >
+                {t("Icons")}
+              </StyledTab>
+              <StyledTab
+                {...tab}
+                id={TAB_NAMES["Emoji"]}
+                aria-label={t("Emojis")}
+                active={tab.selectedId === TAB_NAMES["Emoji"]}
+              >
+                {t("Emojis")}
+              </StyledTab>
+            </TabList>
+            {allowDelete && icon && (
+              <RemoveButton onClick={handleIconRemove}>
+                {t("Remove")}
+              </RemoveButton>
+            )}
+          </TabActionsWrapper>
+          <StyledTabPanel {...tab}>
+            <IconPanel
+              panelWidth={panelWidth}
+              initial={initial ?? "?"}
+              color={chosenColor}
+              query={query}
+              panelActive={
+                popover.visible && tab.selectedId === TAB_NAMES["Icon"]
+              }
+              onIconChange={handleIconChange}
+              onColorChange={handleIconColorChange}
+              onQueryChange={setQuery}
+            />
+          </StyledTabPanel>
+          <StyledTabPanel {...tab}>
+            <EmojiPanel
+              panelWidth={panelWidth}
+              query={query}
+              panelActive={
+                popover.visible && tab.selectedId === TAB_NAMES["Emoji"]
+              }
+              onEmojiChange={handleIconChange}
+              onQueryChange={setQuery}
+            />
+          </StyledTabPanel>
+        </>
+      </Popover>
+    </>
+  );
+};
+
+const StyledSmileyIcon = styled(SmileyIcon)`
+  flex-shrink: 0;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const RemoveButton = styled(NudeButton)`
+  width: auto;
+  font-weight: 500;
+  font-size: 14px;
+  color: ${s("textTertiary")};
+  padding: 8px 12px;
+  transition: color 100ms ease-in-out;
+  &: ${hover} {
+    color: ${s("textSecondary")};
+  }
+`;
+
+const TabActionsWrapper = styled(Flex)`
+  padding-left: 12px;
+  border-bottom: 1px solid ${s("inputBorder")};
+`;
+
+const StyledTab = styled(Tab)<{ active: boolean }>`
+  position: relative;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: var(--pointer);
+  background: none;
+  border: 0;
+  padding: 8px 12px;
+  user-select: none;
+  color: ${({ active }) => (active ? s("textSecondary") : s("textTertiary"))};
+  transition: color 100ms ease-in-out;
+
+  &: ${hover} {
+    color: ${s("textSecondary")};
+  }
+
+  ${({ active }) =>
+    active &&
+    css`
+      &:after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: ${s("textSecondary")};
+      }
+    `}
+`;
+
+const StyledTabPanel = styled(TabPanel)`
+  height: 410px;
+  overflow-y: auto;
+`;
+
+export default IconPicker;

app/components/IconPicker/utils.ts

@@ -0,0 +1,50 @@
+import i18next from "i18next";
+
+export enum DisplayCategory {
+  All = "All",
+  Frequent = "Frequent",
+  Search = "Search",
+}
+
+export const TRANSLATED_CATEGORIES = {
+  All: i18next.t("All"),
+  Frequent: i18next.t("Frequently Used"),
+  Search: i18next.t("Search Results"),
+  People: i18next.t("Smileys & People"),
+  Nature: i18next.t("Animals & Nature"),
+  Foods: i18next.t("Food & Drink"),
+  Activity: i18next.t("Activity"),
+  Places: i18next.t("Travel & Places"),
+  Objects: i18next.t("Objects"),
+  Symbols: i18next.t("Symbols"),
+  Flags: i18next.t("Flags"),
+};
+
+export const FREQUENTLY_USED_COUNT = {
+  Get: 24,
+  Track: 30,
+};
+
+const STORAGE_KEYS = {
+  Base: "icon-state",
+  EmojiSkinTone: "emoji-skintone",
+  IconsFrequency: "icons-freq",
+  EmojisFrequency: "emojis-freq",
+  LastIcon: "last-icon",
+  LastEmoji: "last-emoji",
+};
+
+const getStorageKey = (key: string) => `${STORAGE_KEYS.Base}.${key}`;
+
+export const emojiSkinToneKey = getStorageKey(STORAGE_KEYS.EmojiSkinTone);
+
+export const iconsFreqKey = getStorageKey(STORAGE_KEYS.IconsFrequency);
+
+export const emojisFreqKey = getStorageKey(STORAGE_KEYS.EmojisFrequency);
+
+export const lastIconKey = getStorageKey(STORAGE_KEYS.LastIcon);
+
+export const lastEmojiKey = getStorageKey(STORAGE_KEYS.LastEmoji);
+
+export const sortFrequencies = (freqs: [string, number][]) =>
+  freqs.sort((a, b) => (a[1] >= b[1] ? -1 : 1));

app/components/Icons/CircleIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  color?: string;
+  /** If true, the icon will retain its color in selected menus and other places that attempt to override it */
+  retainColor?: boolean;
+};
+
+export default function CircleIcon({
+  size = 24,
+  color = "currentColor",
+  retainColor,
+  ...rest
+}: Props) {
+  return (
+    <svg
+      fill={color}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      version="1.1"
+      style={retainColor ? { fill: color } : undefined}
+      {...rest}
+    >
+      <circle xmlns="http://www.w3.org/2000/svg" cx="12" cy="12" r="8" />
+    </svg>
+  );
+}

app/components/Icons/CollectionIcon.tsx

@@ -2,10 +2,10 @@ import { observer } from "mobx-react";
 import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
-import { IconLibrary } from "@shared/utils/IconLibrary";
+import { colorPalette } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
-import Logger from "~/utils/Logger";
 
 type Props = {
   /** The collection to show an icon for */
@@ -16,6 +16,7 @@ type Props = {
   size?: number;
   /** The color of the icon, defaults to the collection color */
   color?: string;
+  className?: string;
 };
 
 function ResolvedCollectionIcon({
@@ -23,35 +24,41 @@ function ResolvedCollectionIcon({
   color: inputColor,
   expanded,
   size,
+  className,
 }: Props) {
   const { ui } = useStores();
 
-  // If the chosen icon color is very dark then we invert it in dark mode
+  if (!collection.icon || collection.icon === "collection") {
-  // otherwise it will be impossible to see against the dark background.
+    // If the chosen icon color is very dark then we invert it in dark mode
-  const color =
+    // otherwise it will be impossible to see against the dark background.
-    inputColor ||
+    const collectionColor = collection.color ?? colorPalette[0];
-    (ui.resolvedTheme === "dark" && collection.color !== "currentColor"
+    const color =
-      ? getLuminance(collection.color) > 0.09
+      inputColor ||
-        ? collection.color
+      (ui.resolvedTheme === "dark" && collectionColor !== "currentColor"
-        : "currentColor"
+        ? getLuminance(collectionColor) > 0.09
-      : collection.color);
+          ? collectionColor
+          : "currentColor"
+        : collectionColor);
 
-  if (collection.icon && collection.icon !== "collection") {
+    return (
-    try {
+      <CollectionIcon
-      const Component = IconLibrary.getComponent(collection.icon);
+        color={color}
-      return (
+        expanded={expanded}
-        <Component color={color} size={size}>
+        size={size}
-          {collection.initial}
+        className={className}
-        </Component>
+      />
-      );
+    );
-    } catch (error) {
-      Logger.warn("Failed to render custom icon", {
-        icon: collection.icon,
-      });
-    }
   }
 
-  return <CollectionIcon color={color} expanded={expanded} size={size} />;
+  return (
+    <Icon
+      value={collection.icon}
+      color={inputColor ?? collection.color ?? undefined}
+      size={size}
+      initial={collection.initial}
+      className={className}
+    />
+  );
 }
 
 export default observer(ResolvedCollectionIcon);

app/components/Icons/EmojiIcon.tsx

@@ -1,11 +1,13 @@
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 type Props = {
   /** The emoji to render */
   emoji: string;
   /** The size of the emoji, 24px is default to match standard icons */
   size?: number;
+  className?: string;
 };
 
 /**
@@ -15,19 +17,28 @@ type Props = {
 export default function EmojiIcon({ size = 24, emoji, ...rest }: Props) {
   return (
     <Span $size={size} {...rest}>
-      {emoji}
+      <SVG size={size} emoji={emoji} />
     </Span>
   );
 }
 
 const Span = styled.span<{ $size: number }>`
-  display: inline-flex;
+  font-family: ${s("fontFamilyEmoji")};
-  align-items: center;
+  display: inline-block;
-  justify-content: center;
-  text-align: center;
-  flex-shrink: 0;
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
-  text-indent: -0.15em;
-  font-size: ${(props) => props.$size - 10}px;
 `;
+
+const SVG = ({ size, emoji }: { size: number; emoji: string }) => (
+  <svg width={size} height={size} xmlns="http://www.w3.org/2000/svg">
+    <text
+      x="50%"
+      y={"55%"}
+      dominantBaseline="middle"
+      textAnchor="middle"
+      fontSize={size * 0.7}
+    >
+      {emoji}
+    </text>
+  </svg>
+);

app/components/InputSearchPage.tsx

@@ -11,13 +11,21 @@ import { searchPath } from "~/utils/routeHelpers";
 import Input, { Outline } from "./Input";
 
 type Props = {
+  /** A string representing where the search started, for tracking. */
   source: string;
+  /** Placeholder text for the input. */
   placeholder?: string;
+  /** Label for the input. */
   label?: string;
+  /** Whether the label should be hidden. */
   labelHidden?: boolean;
+  /** An optional ID of a collection to search within. */
   collectionId?: string;
+  /** The current value of the input. */
   value?: string;
+  /** Event handler for when the input value changes. */
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
+  /** Event handler for when a key is pressed. */
   onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
 };
 

app/components/InputSelect.tsx

@@ -50,6 +50,11 @@ export type Props = {
   note?: React.ReactNode;
   onChange?: (value: string | null) => void;
   style?: React.CSSProperties;
+  /**
+   * Set to true if this component is rendered inside a Modal.
+   * The Modal will take care of preventing body scroll behaviour.
+   */
+  skipBodyScroll?: boolean;
 };
 
 export interface InputSelectRef {
@@ -79,6 +84,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
     note,
     icon,
     nude,
+    skipBodyScroll,
     ...rest
   } = props;
 
@@ -91,7 +97,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
   const popover = useSelectPopover({
     ...select,
     hideOnClickOutside: false,
-    preventBodyScroll: true,
+    preventBodyScroll: skipBodyScroll ? false : true,
     disabled,
   });
 
@@ -220,7 +226,12 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
             </StyledButton>
           )}
         </Select>
-        <SelectPopover {...select} {...popover} aria-label={ariaLabel}>
+        <SelectPopover
+          {...select}
+          {...popover}
+          aria-label={ariaLabel}
+          preventBodyScroll={skipBodyScroll ? false : true}
+        >
           {(popoverProps: InnerProps) => {
             const topAnchor = popoverProps.style?.top === "0";
             const rightAnchor = popoverProps.placement === "bottom-end";

app/components/InputSelectPermission.tsx

@@ -23,15 +23,16 @@ function InputSelectPermission(
       ref={ref}
       label={t("Permission")}
       options={[
-        {
-          label: t("Can edit"),
-          value: CollectionPermission.ReadWrite,
-        },
         {
           label: t("View only"),
           value: CollectionPermission.Read,
         },
         {
+          label: t("Can edit"),
+          value: CollectionPermission.ReadWrite,
+        },
+        {
+          divider: true,
           label: t("No access"),
           value: EmptySelectValue,
         },

app/components/List/CompositeItem.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-import {
-  CompositeStateReturn,
-  CompositeItem as BaseCompositeItem,
-} from "reakit/Composite";
-import Item, { Props as ItemProps } from "./Item";
-
-export type Props = ItemProps & CompositeStateReturn;
-
-function CompositeItem(
-  { to, ...rest }: Props,
-  ref?: React.Ref<HTMLAnchorElement>
-) {
-  return <BaseCompositeItem as={Item} to={to} {...rest} ref={ref} />;
-}
-
-export default React.forwardRef(CompositeItem);

app/components/List/Item.tsx

@@ -1,9 +1,15 @@
+import {
+  useFocusEffect,
+  useRovingTabIndex,
+} from "@getoutline/react-roving-tabindex";
 import { LocationDescriptor } from "history";
 import * as React from "react";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
+import { hover } from "~/styles";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   /** An icon or image to display to the left of the list item */
@@ -12,6 +18,8 @@ export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   to?: LocationDescriptor;
   /** An optional click handler, if provided the list item will have hover styles */
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  /** An optional keydown handler, if provided the list item will have hover styles */
+  onKeyDown?: React.KeyboardEventHandler<HTMLAnchorElement>;
   /** Whether to match the location exactly */
   exact?: boolean;
   /** The title of the list item */
@@ -24,15 +32,50 @@ export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   border?: boolean;
   /** Whether to display the list item in a compact style */
   small?: boolean;
+  /** Whether to enable keyboard navigation */
+  keyboardNavigation?: boolean;
 };
 
 const ListItem = (
-  { image, title, subtitle, actions, small, border, to, ...rest }: Props,
+  {
-  ref?: React.Ref<HTMLAnchorElement>
+    image,
+    title,
+    subtitle,
+    actions,
+    small,
+    border,
+    to,
+    keyboardNavigation,
+    ...rest
+  }: Props,
+  ref: React.RefObject<HTMLAnchorElement>
 ) => {
   const theme = useTheme();
   const compact = !subtitle;
 
+  let itemRef: React.RefObject<HTMLAnchorElement> =
+    React.useRef<HTMLAnchorElement>(null);
+  if (ref) {
+    itemRef = ref;
+  }
+
+  const { focused, ...rovingTabIndex } = useRovingTabIndex(
+    itemRef,
+    keyboardNavigation || to ? false : true
+  );
+  useFocusEffect(focused, itemRef);
+
+  const handleFocus = React.useCallback(() => {
+    if (itemRef.current) {
+      scrollIntoView(itemRef.current, {
+        scrollMode: "if-needed",
+        behavior: "auto",
+        block: "center",
+        boundary: window.document.body,
+      });
+    }
+  }, [itemRef]);
+
   const content = (selected: boolean) => (
     <>
       {image && <Image>{image}</Image>}
@@ -59,13 +102,30 @@ const ListItem = (
   if (to) {
     return (
       <Wrapper
-        ref={ref}
+        ref={itemRef}
         $border={border}
         $small={small}
         activeStyle={{
           background: theme.accent,
         }}
         {...rest}
+        {...rovingTabIndex}
+        onClick={(ev) => {
+          if (rest.onClick) {
+            rest.onClick(ev);
+          }
+          rovingTabIndex.onClick(ev);
+        }}
+        onKeyDown={(ev) => {
+          if (rest.onKeyDown) {
+            rest.onKeyDown(ev);
+          }
+          rovingTabIndex.onKeyDown(ev);
+        }}
+        onFocus={(ev) => {
+          rovingTabIndex.onFocus(ev);
+          handleFocus();
+        }}
         as={NavLink}
         to={to}
       >
@@ -75,7 +135,26 @@ const ListItem = (
   }
 
   return (
-    <Wrapper ref={ref} $border={border} $small={small} {...rest}>
+    <Wrapper
+      ref={itemRef}
+      $border={border}
+      $small={small}
+      $hover={!!rest.onClick}
+      {...rest}
+      {...rovingTabIndex}
+      onClick={(ev) => {
+        rest.onClick?.(ev);
+        rovingTabIndex.onClick(ev);
+      }}
+      onKeyDown={(ev) => {
+        rest.onKeyDown?.(ev);
+        rovingTabIndex.onKeyDown(ev);
+      }}
+      onFocus={(ev) => {
+        rovingTabIndex.onFocus(ev);
+        handleFocus();
+      }}
+    >
       {content(false)}
     </Wrapper>
   );
@@ -84,6 +163,7 @@ const ListItem = (
 const Wrapper = styled.a<{
   $small?: boolean;
   $border?: boolean;
+  $hover?: boolean;
   onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   to?: LocationDescriptor;
 }>`
@@ -100,9 +180,15 @@ const Wrapper = styled.a<{
     border-bottom: 0;
   }
 
-  &:hover {
+  &:focus-visible {
+    outline: none;
+  }
+
+  &:${hover},
+  &:focus,
+  &:focus-within {
     background: ${(props) =>
-      props.onClick ? props.theme.secondaryBackground : "inherit"};
+      props.$hover ? props.theme.secondaryBackground : "inherit"};
   }
 
   cursor: ${(props) =>

app/components/MobileScrollWrapper.tsx

@@ -1,28 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import useMediaQuery from "~/hooks/useMediaQuery";
-import useMobile from "~/hooks/useMobile";
-
-type Props = {
-  children: React.ReactNode;
-};
-
-const MobileWrapper = styled.div`
-  width: 100vw;
-  height: 100vh;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-`;
-
-const MobileScrollWrapper = ({ children }: Props) => {
-  const isMobile = useMobile();
-  const isPrinting = useMediaQuery("print");
-
-  return isMobile && !isPrinting ? (
-    <MobileWrapper>{children}</MobileWrapper>
-  ) : (
-    <>{children}</>
-  );
-};
-
-export default MobileScrollWrapper;

app/components/Modal.tsx

@@ -254,7 +254,7 @@ const Header = styled(Flex)`
 const Small = styled.div`
   animation: ${fadeAndScaleIn} 250ms ease;
 
-  margin: auto auto;
+  margin: 25vh auto auto auto;
   width: 75vw;
   min-width: 350px;
   max-width: 450px;
@@ -282,7 +282,7 @@ const Small = styled.div`
 `;
 
 const SmallContent = styled(Scrollable)`
-  padding: 12px 24px 24px;
+  padding: 12px 24px;
 `;
 
 export default observer(Modal);

app/components/PageScroll.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import styled from "styled-components";
+import useMediaQuery from "~/hooks/useMediaQuery";
+import useMobile from "~/hooks/useMobile";
+import ScrollContext from "./ScrollContext";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const MobileWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+
+/**
+ * A component that wraps its children in a scrollable container on mobile devices.
+ * This allows us to place a fixed toolbar at the bottom of the page in the document
+ * editor, which would otherwise be obscured by the on-screen keyboard.
+ *
+ * On desktop devices, the children are rendered directly without any wrapping.
+ */
+const PageScroll = ({ children }: Props) => {
+  const isMobile = useMobile();
+  const isPrinting = useMediaQuery("print");
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  return isMobile && !isPrinting ? (
+    <ScrollContext.Provider value={ref}>
+      <MobileWrapper ref={ref}>{children}</MobileWrapper>
+    </ScrollContext.Provider>
+  ) : (
+    <>{children}</>
+  );
+};
+
+export default PageScroll;

app/components/PaginatedDocumentList.tsx

@@ -42,7 +42,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
       fetch={fetch}
       options={options}
       renderError={(props) => <Error {...props} />}
-      renderItem={(item: Document, _index, compositeProps) => (
+      renderItem={(item: Document, _index) => (
         <DocumentListItem
           key={item.id}
           document={item}
@@ -52,7 +52,6 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
           showPublished={showPublished}
           showTemplate={showTemplate}
           showDraft={showDraft}
-          {...compositeProps}
         />
       )}
       {...rest}

app/components/PaginatedEventList.tsx

@@ -30,13 +30,12 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
       heading={heading}
       fetch={fetch}
       options={options}
-      renderItem={(item: Event, index, compositeProps) => (
+      renderItem={(item: Event, index) => (
         <EventListItem
           key={item.id}
           event={item}
           document={document}
           latest={index === 0}
-          {...compositeProps}
         />
       )}
       renderHeading={(name) => <Heading>{name}</Heading>}

app/components/PaginatedList.tsx

@@ -1,10 +1,9 @@
 import isEqual from "lodash/isEqual";
-import { observable, action } from "mobx";
+import { observable, action, computed } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
 import { Waypoint } from "react-waypoint";
-import { CompositeStateReturn } from "reakit/Composite";
 import { Pagination } from "@shared/constants";
 import RootStore from "~/stores/RootStore";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
@@ -30,11 +29,7 @@ type Props<T> = WithTranslation &
     loading?: React.ReactElement;
     items?: T[];
     className?: string;
-    renderItem: (
+    renderItem: (item: T, index: number) => React.ReactNode;
-      item: T,
-      index: number,
-      compositeProps: CompositeStateReturn
-    ) => React.ReactNode;
     renderError?: (options: {
       error: Error;
       retry: () => void;
@@ -44,7 +39,9 @@ type Props<T> = WithTranslation &
   };
 
 @observer
-class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
+class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
+  Props<T>
+> {
   @observable
   error?: Error;
 
@@ -150,6 +147,11 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     }
   };
 
+  @computed
+  get itemsToRender() {
+    return this.props.items?.slice(0, this.renderCount) ?? [];
+  }
+
   render() {
     const {
       items = [],
@@ -193,11 +195,12 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
           aria-label={this.props["aria-label"]}
           onEscape={onEscape}
           className={this.props.className}
+          items={this.itemsToRender}
         >
-          {(composite: CompositeStateReturn) => {
+          {() => {
             let previousHeading = "";
-            return items.slice(0, this.renderCount).map((item, index) => {
+            return this.itemsToRender.map((item, index) => {
-              const children = this.props.renderItem(item, index, composite);
+              const children = this.props.renderItem(item, index);
 
               // If there is no renderHeading method passed then no date
               // headings are rendered

app/components/PlaceholderDocument.tsx

@@ -5,13 +5,17 @@ import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import PlaceholderText from "~/components/PlaceholderText";
 
+type Props = {
+  /** Whether to include a title placeholder. */
+  includeTitle?: boolean;
+  /** Delay before mounting the component. Defaults to 500ms */
+  delay?: number;
+};
+
 export default function PlaceholderDocument({
   includeTitle,
-  delay,
+  delay = 500,
-}: {
+}: Props) {
-  includeTitle?: boolean;
-  delay?: number;
-}) {
   const content = (
     <>
       <PlaceholderText delay={0.2} />

app/components/PluginIcon.tsx

@@ -1,29 +1,37 @@
+import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import PluginLoader from "~/utils/PluginLoader";
+import Logger from "~/utils/Logger";
+import { Hook, usePluginValue } from "~/utils/PluginManager";
 
 type Props = {
+  /** The ID of the plugin to render an Icon for. */
   id: string;
+  /** The size of the icon. */
   size?: number;
+  /** The color of the icon. */
   color?: string;
 };
 
+/**
+ * Renders an icon defined in a plugin (Hook.Icon).
+ */
 function PluginIcon({ id, color, size = 24 }: Props) {
-  const plugin = PluginLoader.plugins[id];
+  const Icon = usePluginValue(Hook.Icon, id);
-  const Icon = plugin?.icon;
 
   if (Icon) {
     return (
-      <Wrapper>
+      <IconPosition>
         <Icon size={size} fill={color} />
-      </Wrapper>
+      </IconPosition>
     );
   }
 
+  Logger.warn("No Icon registered for plugin", { id });
   return null;
 }
 
-const Wrapper = styled.div`
+const IconPosition = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -32,4 +40,4 @@ const Wrapper = styled.div`
   height: 24px;
 `;
 
-export default PluginIcon;
+export default observer(PluginIcon);

app/components/Popover.tsx

@@ -20,15 +20,18 @@ type Props = PopoverProps & {
   hide: () => void;
 };
 
-const Popover: React.FC<Props> = ({
+const Popover = (
-  children,
+  {
-  shrink,
+    children,
-  width = 380,
+    shrink,
-  scrollable = true,
+    width = 380,
-  flex,
+    scrollable = true,
-  mobilePosition,
+    flex,
-  ...rest
+    mobilePosition,
-}: Props) => {
+    ...rest
+  }: Props,
+  ref: React.Ref<HTMLDivElement>
+) => {
   const isMobile = useMobile();
 
   // Custom Escape handler rather than using hideOnEsc from reakit so we can
@@ -50,6 +53,7 @@ const Popover: React.FC<Props> = ({
     return (
       <Dialog {...rest} modal>
         <Contents
+          ref={ref}
           $shrink={shrink}
           $scrollable={scrollable}
           $flex={flex}
@@ -64,6 +68,7 @@ const Popover: React.FC<Props> = ({
   return (
     <StyledPopover {...rest} hideOnEsc={false} hideOnClickOutside>
       <Contents
+        ref={ref}
         $shrink={shrink}
         $width={width}
         $scrollable={scrollable}
@@ -123,4 +128,4 @@ const Contents = styled.div<ContentsProps>`
   `};
 `;
 
-export default Popover;
+export default React.forwardRef(Popover);

app/components/ScrollContext.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+/**
+ * Context to provide a reference to the scrollable container
+ */
+const ScrollContext = React.createContext<
+  React.RefObject<HTMLDivElement> | undefined
+>(undefined);
+
+/**
+ * Hook to get the scrollable container reference
+ */
+export const useScrollContext = () => React.useContext(ScrollContext);
+
+export default ScrollContext;

app/components/ScrollToTop.ts

@@ -2,6 +2,7 @@
 import * as React from "react";
 import { useLocation } from "react-router-dom";
 import usePrevious from "~/hooks/usePrevious";
+import { useScrollContext } from "./ScrollContext";
 
 type Props = {
   children: JSX.Element;
@@ -10,6 +11,7 @@ type Props = {
 export default function ScrollToTop({ children }: Props) {
   const location = useLocation<{ retainScrollPosition?: boolean }>();
   const previousLocationPathname = usePrevious(location.pathname);
+  const scrollContainerRef = useScrollContext();
 
   React.useEffect(() => {
     if (
@@ -25,8 +27,9 @@ export default function ScrollToTop({ children }: Props) {
     ) {
       return;
     }
-    window.scrollTo(0, 0);
+    (scrollContainerRef?.current || window).scrollTo(0, 0);
   }, [
+    scrollContainerRef,
     location.pathname,
     previousLocationPathname,
     location.state?.retainScrollPosition,

app/components/SearchListItem.tsx

@@ -1,7 +1,10 @@
+import {
+  useFocusEffect,
+  useRovingTabIndex,
+} from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
-import { CompositeItem } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s, ellipsis } from "@shared/styles";
@@ -34,10 +37,18 @@ function DocumentListItem(
 ) {
   const { document, highlight, context, shareId, ...rest } = props;
 
+  let itemRef: React.Ref<HTMLAnchorElement> =
+    React.useRef<HTMLAnchorElement>(null);
+  if (ref) {
+    itemRef = ref;
+  }
+
+  const { focused, ...rovingTabIndex } = useRovingTabIndex(itemRef, false);
+  useFocusEffect(focused, itemRef);
+
   return (
-    <CompositeItem
+    <DocumentLink
-      as={DocumentLink}
+      ref={itemRef}
-      ref={ref}
       dir={document.dir}
       to={{
         pathname: shareId
@@ -48,6 +59,13 @@ function DocumentListItem(
         },
       }}
       {...rest}
+      {...rovingTabIndex}
+      onClick={(ev) => {
+        if (rest.onClick) {
+          rest.onClick(ev);
+        }
+        rovingTabIndex.onClick(ev);
+      }}
     >
       <Content>
         <Heading dir={document.dir}>
@@ -66,7 +84,7 @@ function DocumentListItem(
           />
         }
       </Content>
-    </CompositeItem>
+    </DocumentLink>
   );
 }
 

app/components/SearchPopover.tsx

@@ -206,7 +206,7 @@ function SearchPopover({ shareId }: Props) {
             <NoResults>{t("No results for {{query}}", { query })}</NoResults>
           }
           loading={<PlaceholderList count={3} header={{ height: 20 }} />}
-          renderItem={(item: SearchResult, index, compositeProps) => (
+          renderItem={(item: SearchResult, index) => (
             <SearchListItem
               key={item.document.id}
               shareId={shareId}
@@ -215,7 +215,6 @@ function SearchPopover({ shareId }: Props) {
               context={item.context}
               highlight={cachedQuery}
               onClick={handleSearchItemClick}
-              {...compositeProps}
             />
           )}
         />

app/components/Sharing/Collection/CollectionMemberList.tsx

@@ -53,16 +53,16 @@ function CollectionMemberList({ collection, invitedInSession }: Props) {
     () =>
       [
         {
-          label: t("Admin"),
+          label: t("View only"),
-          value: CollectionPermission.Admin,
+          value: CollectionPermission.Read,
         },
         {
           label: t("Can edit"),
           value: CollectionPermission.ReadWrite,
         },
         {
-          label: t("View only"),
+          label: t("Manage"),
-          value: CollectionPermission.Read,
+          value: CollectionPermission.Admin,
         },
         {
           divider: true,
@@ -99,18 +99,20 @@ function CollectionMemberList({ collection, invitedInSession }: Props) {
                 <InputMemberPermissionSelect
                   style={{ margin: 0 }}
                   permissions={permissions}
-                  onChange={async (permission: CollectionPermission) => {
+                  onChange={async (
-                    if (permission) {
+                    permission: CollectionPermission | typeof EmptySelectValue
+                  ) => {
+                    if (permission === EmptySelectValue) {
+                      await collectionGroupMemberships.delete({
+                        collectionId: collection.id,
+                        groupId: membership.groupId,
+                      });
+                    } else {
                       await collectionGroupMemberships.create({
                         collectionId: collection.id,
                         groupId: membership.groupId,
                         permission,
                       });
-                    } else {
-                      await collectionGroupMemberships.delete({
-                        collectionId: collection.id,
-                        groupId: membership.groupId,
-                      });
                     }
                   }}
                   disabled={!can.update}
@@ -146,18 +148,20 @@ function CollectionMemberList({ collection, invitedInSession }: Props) {
                 <InputMemberPermissionSelect
                   style={{ margin: 0 }}
                   permissions={permissions}
-                  onChange={async (permission: CollectionPermission) => {
+                  onChange={async (
-                    if (permission) {
+                    permission: CollectionPermission | typeof EmptySelectValue
+                  ) => {
+                    if (permission === EmptySelectValue) {
+                      await memberships.delete({
+                        collectionId: collection.id,
+                        userId: membership.userId,
+                      });
+                    } else {
                       await memberships.create({
                         collectionId: collection.id,
                         userId: membership.userId,
                         permission,
                       });
-                    } else {
-                      await memberships.delete({
-                        collectionId: collection.id,
-                        userId: membership.userId,
-                      });
                     }
                   }}
                   disabled={!can.update}

app/components/Sharing/Collection/SharePopover.tsx

@@ -20,8 +20,9 @@ import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
+import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
-import { Permission } from "~/types";
+import { EmptySelectValue, Permission } from "~/types";
 import { collectionPath, urlify } from "~/utils/routeHelpers";
 import { Wrapper, presence } from "../components";
 import { CopyLinkButton } from "../components/CopyLinkButton";
@@ -56,9 +57,17 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
     CollectionPermission.Read
   );
 
+  const prevPendingIds = usePrevious(pendingIds);
+
+  const suggestionsRef = React.useRef<HTMLDivElement | null>(null);
+  const searchInputRef = React.useRef<HTMLInputElement | null>(null);
+
   useKeyDown(
     "Escape",
     (ev) => {
+      if (!visible) {
+        return;
+      }
       ev.preventDefault();
       ev.stopImmediatePropagation();
 
@@ -94,6 +103,19 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
     }
   }, [visible]);
 
+  React.useEffect(() => {
+    if (prevPendingIds && pendingIds.length > prevPendingIds.length) {
+      setQuery("");
+      searchInputRef.current?.focus();
+    } else if (prevPendingIds && pendingIds.length < prevPendingIds.length) {
+      const firstPending = suggestionsRef.current?.firstElementChild;
+
+      if (firstPending) {
+        (firstPending as HTMLAnchorElement).focus();
+      }
+    }
+  }, [pendingIds, prevPendingIds]);
+
   const handleQuery = React.useCallback(
     (event) => {
       showPicker();
@@ -116,6 +138,39 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
     [setPendingIds]
   );
 
+  const handleKeyDown = React.useCallback(
+    (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.nativeEvent.isComposing) {
+        return;
+      }
+      if (ev.key === "ArrowDown" && !ev.shiftKey) {
+        ev.preventDefault();
+
+        if (ev.currentTarget.value) {
+          const length = ev.currentTarget.value.length;
+          const selectionStart = ev.currentTarget.selectionStart || 0;
+          if (selectionStart < length) {
+            ev.currentTarget.selectionStart = length;
+            ev.currentTarget.selectionEnd = length;
+            return;
+          }
+        }
+
+        const firstSuggestion = suggestionsRef.current?.firstElementChild;
+
+        if (firstSuggestion) {
+          (firstSuggestion as HTMLAnchorElement).focus();
+        }
+      }
+    },
+    []
+  );
+
+  const handleEscape = React.useCallback(
+    () => searchInputRef.current?.focus(),
+    []
+  );
+
   const inviteAction = React.useMemo(
     () =>
       createAction({
@@ -229,16 +284,16 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
     () =>
       [
         {
-          label: t("Admin"),
+          label: t("View only"),
-          value: CollectionPermission.Admin,
+          value: CollectionPermission.Read,
         },
         {
           label: t("Can edit"),
           value: CollectionPermission.ReadWrite,
         },
         {
-          label: t("View only"),
+          label: t("Manage"),
-          value: CollectionPermission.Read,
+          value: CollectionPermission.Admin,
         },
       ] as Permission[],
     [t]
@@ -289,8 +344,10 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
     <Wrapper>
       {can.update && (
         <SearchInput
+          ref={searchInputRef}
           onChange={handleQuery}
           onClick={showPicker}
+          onKeyDown={handleKeyDown}
           query={query}
           back={backButton}
           action={rightButton}
@@ -298,15 +355,15 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
       )}
 
       {picker && (
-        <div>
+        <Suggestions
-          <Suggestions
+          ref={suggestionsRef}
-            query={query}
+          query={query}
-            collection={collection}
+          collection={collection}
-            pendingIds={pendingIds}
+          pendingIds={pendingIds}
-            addPendingId={handleAddPendingId}
+          addPendingId={handleAddPendingId}
-            removePendingId={handleRemovePendingId}
+          removePendingId={handleRemovePendingId}
-          />
+          onEscape={handleEscape}
-        </div>
+        />
       )}
 
       <div style={{ display: picker ? "none" : "block" }}>
@@ -322,8 +379,12 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
             <div style={{ marginRight: -8 }}>
               <InputSelectPermission
                 style={{ margin: 0 }}
-                onChange={(permission) => {
+                onChange={(
-                  void collection.save({ permission });
+                  value: CollectionPermission | typeof EmptySelectValue
+                ) => {
+                  void collection.save({
+                    permission: value === EmptySelectValue ? null : value,
+                  });
                 }}
                 disabled={!can.update}
                 value={collection?.permission}

app/components/Sharing/Document/DocumentMemberListItem.tsx

@@ -51,6 +51,10 @@ const DocumentMemberListItem = ({
       label: t("Can edit"),
       value: DocumentPermission.ReadWrite,
     },
+    {
+      label: t("Manage"),
+      value: DocumentPermission.Admin,
+    },
     {
       divider: true,
       label: t("Remove"),

app/components/Sharing/Document/OtherAccess.tsx

@@ -4,7 +4,8 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
-import { CollectionPermission } from "@shared/types";
+import { CollectionPermission, IconType } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
 import type Collection from "~/models/Collection";
 import type Document from "~/models/Document";
 import Flex from "~/components/Flex";
@@ -54,15 +55,7 @@ export const OtherAccess = observer(({ document, children }: Props) => {
             />
           ) : usersInCollection ? (
             <ListItem
-              image={
+              image={<CollectionSquircle collection={collection} />}
-                <Squircle color={collection.color} size={AvatarSize.Medium}>
-                  <CollectionIcon
-                    collection={collection}
-                    color={theme.white}
-                    size={16}
-                  />
-                </Squircle>
-              }
               title={collection.name}
               subtitle={t("Everyone in the collection")}
               actions={<AccessTooltip>{t("Can view")}</AccessTooltip>}
@@ -136,6 +129,24 @@ const AccessTooltip = ({
   );
 };
 
+const CollectionSquircle = ({ collection }: { collection: Collection }) => {
+  const theme = useTheme();
+  const iconType = determineIconType(collection.icon)!;
+  const squircleColor =
+    iconType === IconType.SVG ? collection.color! : theme.slateLight;
+  const iconSize = iconType === IconType.SVG ? 16 : 22;
+
+  return (
+    <Squircle color={squircleColor} size={AvatarSize.Medium}>
+      <CollectionIcon
+        collection={collection}
+        color={theme.white}
+        size={iconSize}
+      />
+    </Squircle>
+  );
+};
+
 function useUsersInCollection(collection?: Collection) {
   const { users, memberships } = useStores();
   const { request } = useRequest(() =>

app/components/Sharing/Document/PublicAccess.tsx

@@ -172,11 +172,9 @@ function PublicAccess({ document, share, sharedParent }: Props) {
             error={validationError}
             defaultValue={urlId}
             prefix={
-              <DomainPrefix
+              <DomainPrefix onClick={() => inputRef.current?.focus()}>
-                readOnly
+                {env.URL.replace(/https?:\/\//, "") + "/s/"}
-                onClick={() => inputRef.current?.focus()}
+              </DomainPrefix>
-                value={env.URL.replace(/https?:\/\//, "") + "/s/"}
-              />
             }
           >
             {copyButton}
@@ -208,9 +206,9 @@ const Wrapper = styled.div`
   margin-bottom: 8px;
 `;
 
-const DomainPrefix = styled(NativeInput)`
+const DomainPrefix = styled.span`
+  padding: 0 2px 0 8px;
   flex: 0 1 auto;
-  padding-right: 0 !important;
   cursor: text;
   color: ${s("placeholder")};
   user-select: none;

app/components/Sharing/Document/SharePopover.tsx

@@ -18,6 +18,7 @@ import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
+import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import { Permission } from "~/types";
 import { documentPath, urlify } from "~/utils/routeHelpers";
@@ -64,9 +65,17 @@ function SharePopover({
     DocumentPermission.Read
   );
 
+  const prevPendingIds = usePrevious(pendingIds);
+
+  const suggestionsRef = React.useRef<HTMLDivElement | null>(null);
+  const searchInputRef = React.useRef<HTMLInputElement | null>(null);
+
   useKeyDown(
     "Escape",
     (ev) => {
+      if (!visible) {
+        return;
+      }
       ev.preventDefault();
       ev.stopImmediatePropagation();
 
@@ -104,6 +113,19 @@ function SharePopover({
     }
   }, [picker]);
 
+  React.useEffect(() => {
+    if (prevPendingIds && pendingIds.length > prevPendingIds.length) {
+      setQuery("");
+      searchInputRef.current?.focus();
+    } else if (prevPendingIds && pendingIds.length < prevPendingIds.length) {
+      const firstPending = suggestionsRef.current?.firstElementChild;
+
+      if (firstPending) {
+        (firstPending as HTMLAnchorElement).focus();
+      }
+    }
+  }, [pendingIds, prevPendingIds]);
+
   const inviteAction = React.useMemo(
     () =>
       createAction({
@@ -199,16 +221,53 @@ function SharePopover({
     [setPendingIds]
   );
 
+  const handleKeyDown = React.useCallback(
+    (ev: React.KeyboardEvent<HTMLInputElement>) => {
+      if (ev.nativeEvent.isComposing) {
+        return;
+      }
+      if (ev.key === "ArrowDown" && !ev.shiftKey) {
+        ev.preventDefault();
+
+        if (ev.currentTarget.value) {
+          const length = ev.currentTarget.value.length;
+          const selectionStart = ev.currentTarget.selectionStart || 0;
+          if (selectionStart < length) {
+            ev.currentTarget.selectionStart = length;
+            ev.currentTarget.selectionEnd = length;
+            return;
+          }
+        }
+
+        const firstSuggestion = suggestionsRef.current?.firstElementChild;
+
+        if (firstSuggestion) {
+          (firstSuggestion as HTMLAnchorElement).focus();
+        }
+      }
+    },
+    []
+  );
+
+  const handleEscape = React.useCallback(
+    () => searchInputRef.current?.focus(),
+    []
+  );
+
   const permissions = React.useMemo(
     () =>
       [
+        {
+          label: t("View only"),
+          value: DocumentPermission.Read,
+        },
         {
           label: t("Can edit"),
           value: DocumentPermission.ReadWrite,
         },
         {
-          label: t("View only"),
+          label: t("Manage"),
-          value: DocumentPermission.Read,
+          value: DocumentPermission.Admin,
         },
       ] as Permission[],
     [t]
@@ -259,8 +318,10 @@ function SharePopover({
     <Wrapper>
       {can.manageUsers && (
         <SearchInput
+          ref={searchInputRef}
           onChange={handleQuery}
           onClick={showPicker}
+          onKeyDown={handleKeyDown}
           query={query}
           back={backButton}
           action={rightButton}
@@ -268,15 +329,15 @@ function SharePopover({
       )}
 
       {picker && (
-        <div>
+        <Suggestions
-          <Suggestions
+          ref={suggestionsRef}
-            document={document}
+          document={document}
-            query={query}
+          query={query}
-            pendingIds={pendingIds}
+          pendingIds={pendingIds}
-            addPendingId={handleAddPendingId}
+          addPendingId={handleAddPendingId}
-            removePendingId={handleRemovePendingId}
+          removePendingId={handleRemovePendingId}
-          />
+          onEscape={handleEscape}
-        </div>
+        />
       )}
 
       <div style={{ display: picker ? "none" : "block" }}>
@@ -287,7 +348,7 @@ function SharePopover({
           />
         </OtherAccess>
 
-        {team.sharing && can.share && !collectionSharingDisabled && (
+        {team.sharing && can.share && !collectionSharingDisabled && visible && (
           <>
             {document.members.length ? <Separator /> : null}
             <PublicAccess

app/components/Sharing/components/ListItem.tsx

@@ -15,7 +15,9 @@ export const ListItem = styled(BaseListItem).attrs({
   padding: 6px 16px;
   border-radius: 8px;
 
-  &: ${hover} ${InviteIcon} {
+  &: ${hover} ${InviteIcon},
+  &:focus ${InviteIcon},
+  &:focus-within ${InviteIcon} {
     opacity: 1;
   }
 `;

app/components/Sharing/components/SearchInput.tsx

@@ -1,6 +1,7 @@
 import { AnimatePresence } from "framer-motion";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { mergeRefs } from "react-merge-refs";
 import Flex from "~/components/Flex";
 import useMobile from "~/hooks/useMobile";
 import Input, { NativeInput } from "../../Input";
@@ -10,17 +11,25 @@ type Props = {
   query: string;
   onChange: React.ChangeEventHandler;
   onClick: React.MouseEventHandler;
+  onKeyDown: React.KeyboardEventHandler;
   back: React.ReactNode;
   action: React.ReactNode;
 };
 
-export function SearchInput({ onChange, onClick, query, back, action }: Props) {
+export const SearchInput = React.forwardRef(function _SearchInput(
+  { onChange, onClick, onKeyDown, query, back, action }: Props,
+  ref: React.Ref<HTMLInputElement>
+) {
   const { t } = useTranslation();
   const inputRef = React.useRef<HTMLInputElement>(null);
+
   const isMobile = useMobile();
 
   const focusInput = React.useCallback(
     (event) => {
+      if (event.target.closest("button")) {
+        return;
+      }
       inputRef.current?.focus();
       onClick(event);
     },
@@ -36,6 +45,7 @@ export function SearchInput({ onChange, onClick, query, back, action }: Props) {
         value={query}
         onChange={onChange}
         onClick={onClick}
+        onKeyDown={onKeyDown}
         autoFocus
         margin={0}
         flex
@@ -49,15 +59,16 @@ export function SearchInput({ onChange, onClick, query, back, action }: Props) {
         {back}
         <NativeInput
           key="input"
-          ref={inputRef}
+          ref={mergeRefs([inputRef, ref])}
           placeholder={`${t("Add or invite")}…`}
           value={query}
           onChange={onChange}
           onClick={onClick}
+          onKeyDown={onKeyDown}
           style={{ padding: "6px 0" }}
         />
         {action}
       </AnimatePresence>
     </HeaderInput>
   );
-}
+});

app/components/Sharing/components/Suggestions.tsx

@@ -1,4 +1,5 @@
 import { isEmail } from "class-validator";
+import concat from "lodash/concat";
 import { observer } from "mobx-react";
 import { CheckmarkIcon, CloseIcon, GroupIcon } from "outline-icons";
 import * as React from "react";
@@ -11,11 +12,14 @@ import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Group from "~/models/Group";
 import User from "~/models/User";
+import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import Avatar from "~/components/Avatar";
 import { AvatarSize, IAvatar } from "~/components/Avatar/Avatar";
 import Empty from "~/components/Empty";
 import Placeholder from "~/components/List/Placeholder";
+import Scrollable from "~/components/Scrollable";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import useMaxHeight from "~/hooks/useMaxHeight";
 import useStores from "~/hooks/useStores";
 import useThrottledCallback from "~/hooks/useThrottledCallback";
 import { hover } from "~/styles";
@@ -40,30 +44,41 @@ type Props = {
   removePendingId: (id: string) => void;
   /** Show group suggestions. */
   showGroups?: boolean;
+  /** Handles escape from suggestions list */
+  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
 };
 
 export const Suggestions = observer(
-  ({
+  React.forwardRef(function _Suggestions(
-    document,
+    {
-    collection,
+      document,
-    query,
+      collection,
-    pendingIds,
+      query,
-    addPendingId,
+      pendingIds,
-    removePendingId,
+      addPendingId,
-    showGroups,
+      removePendingId,
-  }: Props) => {
+      showGroups,
+      onEscape,
+    }: Props,
+    ref: React.Ref<HTMLDivElement>
+  ) {
     const neverRenderedList = React.useRef(false);
     const { users, groups } = useStores();
     const { t } = useTranslation();
     const user = useCurrentUser();
     const theme = useTheme();
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const maxHeight = useMaxHeight({
+      elementRef: containerRef,
+      maxViewportPercentage: 70,
+    });
 
     const fetchUsersByQuery = useThrottledCallback(
-      (params) => {
+      (query: string) => {
-        void users.fetchPage({ query: params.query });
+        void users.fetchPage({ query });
 
         if (showGroups) {
-          void groups.fetchPage({ query: params.query });
+          void groups.fetchPage({ query });
         }
       },
       250,
@@ -92,7 +107,7 @@ export const Suggestions = observer(
           : collection
           ? users.notInCollection(collection.id, query)
           : users.orderedData
-      ).filter((u) => u.id !== user.id && !u.isSuspended);
+      ).filter((u) => !u.isSuspended);
 
       if (isEmail(query)) {
         filtered.push(getSuggestionForEmail(query));
@@ -174,34 +189,65 @@ export const Suggestions = observer(
     neverRenderedList.current = false;
 
     return (
-      <>
+      <ScrollableContainer
-        {pending.map((suggestion) => (
+        ref={containerRef}
-          <PendingListItem
+        hiddenScrollbars
-            {...getListItemProps(suggestion)}
+        style={{ maxHeight }}
-            key={suggestion.id}
+      >
-            onClick={() => removePendingId(suggestion.id)}
+        <ArrowKeyNavigation
-            actions={
+          ref={ref}
-              <>
+          onEscape={onEscape}
-                <InvitedIcon />
+          aria-label={t("Suggestions for invitation")}
-                <RemoveIcon />
+          items={concat(pending, suggestionsWithPending)}
-              </>
+        >
-            }
+          {() => [
-          />
+            ...pending.map((suggestion) => (
-        ))}
+              <PendingListItem
-        {pending.length > 0 &&
+                keyboardNavigation
-          (suggestionsWithPending.length > 0 || isEmpty) && <Separator />}
+                {...getListItemProps(suggestion)}
-        {suggestionsWithPending.map((suggestion) => (
+                key={suggestion.id}
-          <ListItem
+                onClick={() => removePendingId(suggestion.id)}
-            {...getListItemProps(suggestion as User)}
+                onKeyDown={(ev) => {
-            key={suggestion.id}
+                  if (ev.key === "Enter") {
-            onClick={() => addPendingId(suggestion.id)}
+                    ev.preventDefault();
-            actions={<InviteIcon />}
+                    ev.stopPropagation();
-          />
+                    removePendingId(suggestion.id);
-        ))}
+                  }
-        {isEmpty && <Empty style={{ marginTop: 22 }}>{t("No matches")}</Empty>}
+                }}
-      </>
+                actions={
+                  <>
+                    <InvitedIcon />
+                    <RemoveIcon />
+                  </>
+                }
+              />
+            )),
+            pending.length > 0 &&
+              (suggestionsWithPending.length > 0 || isEmpty) && <Separator />,
+            ...suggestionsWithPending.map((suggestion) => (
+              <ListItem
+                keyboardNavigation
+                {...getListItemProps(suggestion as User)}
+                key={suggestion.id}
+                onClick={() => addPendingId(suggestion.id)}
+                onKeyDown={(ev) => {
+                  if (ev.key === "Enter") {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    addPendingId(suggestion.id);
+                  }
+                }}
+                actions={<InviteIcon />}
+              />
+            )),
+            isEmpty && (
+              <Empty style={{ marginTop: 22 }}>{t("No matches")}</Empty>
+            ),
+          ]}
+        </ArrowKeyNavigation>
+      </ScrollableContainer>
     );
-  }
+  })
 );
 
 const InvitedIcon = styled(CheckmarkIcon)`
@@ -228,3 +274,8 @@ const Separator = styled.div`
   border-top: 1px dashed ${s("divider")};
   margin: 12px 0;
 `;
+
+const ScrollableContainer = styled(Scrollable)`
+  padding: 12px 24px;
+  margin: -12px -24px;
+`;

app/components/Sidebar/App.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { EditIcon, SearchIcon, HomeIcon, SidebarIcon } from "outline-icons";
+import { DraftsIcon, SearchIcon, HomeIcon, SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
@@ -55,7 +55,7 @@ function AppSidebar() {
   );
 
   return (
-    <Sidebar ref={handleSidebarRef}>
+    <Sidebar hidden={!ui.readyToShow} ref={handleSidebarRef}>
       <HistoryNavigation />
       {dndArea && (
         <DndProvider backend={HTML5Backend} options={html5Options}>
@@ -109,7 +109,7 @@ function AppSidebar() {
               {can.createDocument && (
                 <SidebarLink
                   to={draftsPath()}
-                  icon={<EditIcon />}
+                  icon={<DraftsIcon />}
                   label={
                     <Flex align="center" justify="space-between">
                       {t("Drafts")}

app/components/Sidebar/Right.tsx

@@ -50,7 +50,8 @@ function Right({ children, border, className }: Props) {
     }
   }, []);
 
-  const handleMouseDown = React.useCallback(() => {
+  const handleMouseDown = React.useCallback((event) => {
+    event.preventDefault();
     setResizing(true);
   }, []);
 

app/components/Sidebar/Shared.tsx

@@ -29,7 +29,7 @@ function SharedSidebar({ rootNode, shareId }: Props) {
 
   return (
     <Sidebar>
-      {team && (
+      {team?.name && (
         <SidebarButton
           title={team.name}
           image={<TeamLogo model={team} size={32} alt={t("Logo")} />}

app/components/Sidebar/Sidebar.tsx

@@ -24,11 +24,12 @@ const ANIMATION_MS = 250;
 
 type Props = {
   children: React.ReactNode;
+  hidden?: boolean;
   className?: string;
 };
 
 const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
-  { children, className }: Props,
+  { children, hidden = false, className }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const [isCollapsing, setCollapsing] = React.useState(false);
@@ -93,6 +94,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
 
   const handleMouseDown = React.useCallback(
     (event) => {
+      event.preventDefault();
       setOffset(event.pageX - width);
       setResizing(true);
       setAnimating(false);
@@ -111,10 +113,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
     (ev) => {
       if (hasPointerMoved) {
         setHovering(
-          ev.pageX < width &&
+          ev.pageX < width && ev.pageY < window.innerHeight && ev.pageY > 0
-            ev.pageX > 0 &&
-            ev.pageY < window.innerHeight &&
-            ev.pageY > 0
         );
       }
     },
@@ -145,8 +144,11 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
 
   React.useEffect(() => {
     if (isResizing) {
+      document.body.style.cursor = "col-resize";
       document.addEventListener("mousemove", handleDrag);
       document.addEventListener("mouseup", handleStopDrag);
+    } else {
+      document.body.style.cursor = "initial";
     }
 
     return () => {
@@ -181,6 +183,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
       <Container
         ref={ref}
         style={style}
+        $hidden={hidden}
         $isHovering={isHovering}
         $isAnimating={isAnimating}
         $isSmallerThanMinimum={isSmallerThanMinimum}
@@ -252,6 +255,7 @@ type ContainerProps = {
   $isSmallerThanMinimum: boolean;
   $isHovering: boolean;
   $collapsed: boolean;
+  $hidden: boolean;
 };
 
 const hoverStyles = (props: ContainerProps) => `
@@ -270,13 +274,14 @@ const hoverStyles = (props: ContainerProps) => `
 `;
 
 const Container = styled(Flex)<ContainerProps>`
+  opacity: ${(props) => (props.$hidden ? 0 : 1)};
   position: fixed;
   top: 0;
   bottom: 0;
   width: 100%;
   background: ${s("sidebarBackground")};
-  transition: box-shadow 100ms ease-in-out, opacity 100ms ease-in-out,
+  transition: box-shadow 150ms ease-in-out, opacity 150ms ease-in-out,
-    transform 100ms ease-out,
+    transform 150ms ease-out,
     ${s("backgroundTransition")}
       ${(props: ContainerProps) =>
         props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
@@ -319,7 +324,7 @@ const Container = styled(Flex)<ContainerProps>`
 
       & > div {
         opacity: 1;
-      }    
+      }
     }
   `};
 `;

app/components/Sidebar/components/DocumentLink.tsx

@@ -14,13 +14,14 @@ import { DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
-import { newDocumentPath } from "~/utils/routeHelpers";
+import { newNestedDocumentPath } from "~/utils/routeHelpers";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
 import EditableTitle, { RefHandle } from "./EditableTitle";
@@ -282,6 +283,8 @@ function InnerDocumentLink(
   const title =
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
+  const icon = document?.icon || node.icon || node.emoji;
+  const color = document?.color || node.color;
 
   const isExpanded = expanded && !isDragging;
   const hasChildren = nodeChildren.length > 0;
@@ -331,7 +334,7 @@ function InnerDocumentLink(
                     starred: inStarredSection,
                   },
                 }}
-                emoji={document?.emoji || node.emoji}
+                icon={icon && <Icon value={icon} color={color} />}
                 label={
                   <EditableTitle
                     title={title}
@@ -366,9 +369,7 @@ function InnerDocumentLink(
                             type={undefined}
                             aria-label={t("New nested document")}
                             as={Link}
-                            to={newDocumentPath(document.collectionId, {
+                            to={newNestedDocumentPath(document.id)}
-                              parentDocumentId: document.id,
-                            })}
                           >
                             <PlusIcon />
                           </NudeButton>

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { NavigationNode } from "@shared/types";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { descendants } from "~/utils/tree";
@@ -100,6 +101,8 @@ function DocumentLink(
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
 
+  const icon = node.icon ?? node.emoji;
+
   return (
     <>
       <SidebarLink
@@ -111,7 +114,7 @@ function DocumentLink(
         }}
         expanded={hasChildDocuments && depth !== 0 ? expanded : undefined}
         onDisclosureClick={handleDisclosureClick}
-        emoji={node.emoji}
+        icon={icon && <Icon value={icon} color={node.color} />}
         label={title}
         depth={depth}
         exact={false}

app/components/Sidebar/components/SharedWithMeLink.tsx

@@ -2,7 +2,8 @@ import fractionalIndex from "fractional-index";
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import { NotificationEventType } from "@shared/types";
+import { IconType, NotificationEventType } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
 import UserMembership from "~/models/UserMembership";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
@@ -78,10 +79,11 @@ function SharedWithMeLink({ userMembership }: Props) {
       return null;
     }
 
-    const { emoji } = document;
+    const { icon: docIcon } = document;
-    const label = emoji
+    const label =
-      ? document.title.replace(emoji, "")
+      determineIconType(docIcon) === IconType.Emoji
-      : document.titleWithDefault;
+        ? document.title.replace(docIcon!, "")
+        : document.titleWithDefault;
     const collection = document.collectionId
       ? collections.get(document.collectionId)
       : undefined;

app/components/Sidebar/components/SidebarLink.tsx

@@ -2,10 +2,9 @@ import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import EventBoundary from "@shared/components/EventBoundary";
 import { s } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
-import EventBoundary from "~/components/EventBoundary";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
 import NudeButton from "~/components/NudeButton";
 import { UnreadBadge } from "~/components/UnreadBadge";
 import useUnmount from "~/hooks/useUnmount";
@@ -27,7 +26,6 @@ type Props = Omit<NavLinkProps, "to"> & {
   onClickIntent?: () => void;
   onDisclosureClick?: React.MouseEventHandler<HTMLButtonElement>;
   icon?: React.ReactNode;
-  emoji?: string | null;
   label?: React.ReactNode;
   menu?: React.ReactNode;
   unreadBadge?: boolean;
@@ -52,7 +50,6 @@ function SidebarLink(
     onClick,
     onClickIntent,
     to,
-    emoji,
     label,
     active,
     isActiveDrop,
@@ -142,7 +139,6 @@ function SidebarLink(
             />
           )}
           {icon && <IconWrapper>{icon}</IconWrapper>}
-          {emoji && <EmojiIcon emoji={emoji} />}
           <Label>{label}</Label>
           {unreadBadge && <UnreadBadge />}
         </Content>

app/components/Sidebar/components/useSidebarLabelAndIcon.tsx

@@ -1,7 +1,7 @@
 import { DocumentIcon } from "outline-icons";
 import * as React from "react";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
 import useStores from "~/hooks/useStores";
 
 interface SidebarItem {
@@ -21,7 +21,11 @@ export function useSidebarLabelAndIcon(
     if (document) {
       return {
         label: document.titleWithDefault,
-        icon: document.emoji ? <EmojiIcon emoji={document.emoji} /> : icon,
+        icon: document.icon ? (
+          <Icon value={document.icon} color={document.color ?? undefined} />
+        ) : (
+          icon
+        ),
       };
     }
   }

app/editor/components/EmojiMenu.tsx

@@ -1,11 +1,7 @@
-import data, { type Emoji as TEmoji } from "@emoji-mart/data";
-import { init, Data } from "emoji-mart";
-import FuzzySearch from "fuzzy-search";
 import capitalize from "lodash/capitalize";
-import sortBy from "lodash/sortBy";
 import React from "react";
 import { emojiMartToGemoji, snakeCase } from "@shared/editor/lib/emoji";
-import { isMac } from "@shared/utils/browser";
+import { search as emojiSearch } from "@shared/utils/emoji";
 import EmojiMenuItem from "./EmojiMenuItem";
 import SuggestionsMenu, {
   Props as SuggestionsMenuProps,
@@ -19,13 +15,6 @@ type Emoji = {
   attrs: { markup: string; "data-name": string };
 };
 
-init({
-  data,
-  noCountryFlags: isMac() ? false : undefined,
-});
-
-let searcher: FuzzySearch<TEmoji>;
-
 type Props = Omit<
   SuggestionsMenuProps<Emoji>,
   "renderMenuItem" | "items" | "embeds" | "trigger"
@@ -34,36 +23,26 @@ type Props = Omit<
 const EmojiMenu = (props: Props) => {
   const { search = "" } = props;
 
-  if (!searcher) {
+  const items = React.useMemo(
-    searcher = new FuzzySearch(Object.values(Data.emojis), ["search"], {
+    () =>
-      caseSensitive: false,
+      emojiSearch({ query: search })
-      sort: true,
+        .map((item) => {
-    });
+          // We snake_case the shortcode for backwards compatability with gemoji to
-  }
+          // avoid multiple formats being written into documents.
+          const shortcode = snakeCase(emojiMartToGemoji[item.id] || item.id);
+          const emoji = item.value;
 
-  const items = React.useMemo(() => {
+          return {
-    const n = search.toLowerCase();
+            name: "emoji",
-
+            title: emoji,
-    return sortBy(searcher.search(n), (item) => {
+            description: capitalize(item.name.toLowerCase()),
-      const nlc = item.name.toLowerCase();
+            emoji,
-      return nlc === n ? -1 : nlc.startsWith(n) ? 0 : 1;
+            attrs: { markup: shortcode, "data-name": shortcode },
-    })
+          };
-      .map((item) => {
+        })
-        // We snake_case the shortcode for backwards compatability with gemoji to
+        .slice(0, 15),
-        // avoid multiple formats being written into documents.
+    [search]
-        const shortcode = snakeCase(emojiMartToGemoji[item.id] || item.id);
+  );
-        const emoji = item.skins[0].native;
-
-        return {
-          name: "emoji",
-          title: emoji,
-          description: capitalize(item.name.toLowerCase()),
-          emoji,
-          attrs: { markup: shortcode, "data-name": shortcode },
-        };
-      })
-      .slice(0, 15);
-  }, [search]);
 
   return (
     <SuggestionsMenu

app/editor/components/FloatingToolbar.tsx

@@ -223,6 +223,7 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
       return (
         <ReactPortal>
           <MobileWrapper
+            ref={menuRef}
             style={{
               bottom: `calc(100% - ${height - rect.y}px)`,
             }}

app/editor/components/SelectionToolbar.tsx

@@ -3,10 +3,10 @@ import { EditorState, NodeSelection, TextSelection } from "prosemirror-state";
 import * as React from "react";
 import createAndInsertLink from "@shared/editor/commands/createAndInsertLink";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
-import getMarkRange from "@shared/editor/queries/getMarkRange";
+import { getMarkRange } from "@shared/editor/queries/getMarkRange";
-import isInCode from "@shared/editor/queries/isInCode";
+import { isInCode } from "@shared/editor/queries/isInCode";
-import isMarkActive from "@shared/editor/queries/isMarkActive";
+import { isMarkActive } from "@shared/editor/queries/isMarkActive";
-import isNodeActive from "@shared/editor/queries/isNodeActive";
+import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { getColumnIndex, getRowIndex } from "@shared/editor/queries/table";
 import { MenuItem } from "@shared/editor/types";
 import { creatingUrlPrefix } from "@shared/utils/urls";
@@ -100,10 +100,10 @@ export default function SelectionToolbar(props: Props) {
   const { view, commands } = useEditor();
   const dictionary = useDictionary();
   const menuRef = React.useRef<HTMLDivElement | null>(null);
-  const isActive = useIsActive(view.state);
+  const isMobile = useMobile();
+  const isActive = useIsActive(view.state) || isMobile;
   const isDragging = useIsDragging();
   const previousIsActive = usePrevious(isActive);
-  const isMobile = useMobile();
 
   React.useEffect(() => {
     // Trigger callbacks when the toolbar is opened or closed
@@ -230,7 +230,7 @@ export default function SelectionToolbar(props: Props) {
   if (isCodeSelection && selection.empty) {
     items = getCodeMenuItems(state, readOnly, dictionary);
   } else if (isTableSelection) {
-    items = getTableMenuItems(dictionary);
+    items = getTableMenuItems(state, dictionary);
   } else if (colIndex !== undefined) {
     items = getTableColMenuItems(state, colIndex, rtl, dictionary);
   } else if (rowIndex !== undefined) {

app/editor/components/SuggestionsMenu.tsx

@@ -78,6 +78,10 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
   const { view, commands } = useEditor();
   const dictionary = useDictionary();
   const hasActivated = React.useRef(false);
+  const pointerRef = React.useRef<{ clientX: number; clientY: number }>({
+    clientX: 0,
+    clientY: 0,
+  });
   const menuRef = React.useRef<HTMLDivElement>(null);
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [position, setPosition] = React.useState<Position>(defaultPosition);
@@ -344,6 +348,9 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
   const handleFilesPicked = async (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
+    // Re-focus the editor as it loses focus when file picker is opened on iOS
+    view.focus();
+
     const { uploadFile, onFileUploadStart, onFileUploadStop } = props;
     const files = getEventFiles(event);
     const parent = findParentNode((node) => !!node)(view.state.selection);
@@ -576,7 +583,23 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                     return null;
                   }
 
-                  const handlePointer = () => {
+                  const handlePointerMove = (ev: React.PointerEvent) => {
+                    if (
+                      selectedIndex !== index &&
+                      // Safari triggers pointermove with identical coordinates when the pointer has not moved.
+                      // This causes the menu selection to flicker when the pointer is over the menu but not moving.
+                      (pointerRef.current.clientX !== ev.clientX ||
+                        pointerRef.current.clientY !== ev.clientY)
+                    ) {
+                      setSelectedIndex(index);
+                    }
+                    pointerRef.current = {
+                      clientX: ev.clientX,
+                      clientY: ev.clientY,
+                    };
+                  };
+
+                  const handlePointerDown = () => {
                     if (selectedIndex !== index) {
                       setSelectedIndex(index);
                     }
@@ -585,8 +608,8 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                   return (
                     <ListItem
                       key={index}
-                      onPointerMove={handlePointer}
+                      onPointerMove={handlePointerMove}
-                      onPointerDown={handlePointer}
+                      onPointerDown={handlePointerDown}
                     >
                       {props.renderMenuItem(item as any, index, {
                         selected: index === selectedIndex,

app/editor/components/ToolbarMenu.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useMenuState } from "reakit";
 import { MenuButton } from "reakit/Menu";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { MenuItem } from "@shared/editor/types";
 import { s } from "@shared/styles";
 import ContextMenu from "~/components/ContextMenu";
@@ -19,7 +20,7 @@ type Props = {
 /*
  * Renders a dropdown menu in the floating toolbar.
  */
-function ToolbarDropdown(props: { item: MenuItem }) {
+function ToolbarDropdown(props: { active: boolean; item: MenuItem }) {
   const menu = useMenuState();
   const { commands, view } = useEditor();
   const { item } = props;
@@ -101,7 +102,7 @@ function ToolbarMenu(props: Props) {
             key={index}
           >
             {item.children ? (
-              <ToolbarDropdown item={item} />
+              <ToolbarDropdown active={isActive && !item.label} item={item} />
             ) : (
               <ToolbarButton
                 onClick={handleClick(item)}
@@ -123,6 +124,11 @@ const FlexibleWrapper = styled.div`
   overflow: hidden;
   display: flex;
   gap: 6px;
+
+  ${breakpoint("mobile", "tablet")`
+    justify-content: space-evenly;
+    align-items: baseline;
+  `}
 `;
 
 const Label = styled.span`

app/editor/extensions/BlockMenu.tsx

@@ -12,8 +12,9 @@ import BlockMenu from "../components/BlockMenu";
 export default class BlockMenuExtension extends Suggestion {
   get defaultOptions() {
     return {
-      openRegex: /^\/(\w+)?$/,
+      // ported from https://github.com/tc39/proposal-regexp-unicode-property-escapes#unicode-aware-version-of-w
-      closeRegex: /(^(?!\/(\w+)?)(.*)$|^\/(([\w\W]+)\s.*|\s)$|^\/((\W)+)$)/,
+      openRegex: /(?:^|\s|\()\/([\p{L}\p{M}\d]+)?$/u,
+      closeRegex: /(?:^|\s|\()\/(([\p{L}\p{M}\d]*\s+)|(\s+[\p{L}\p{M}\d]+))$/u,
     };
   }
 

app/editor/extensions/EmojiMenu.tsx

@@ -24,7 +24,6 @@ export default class EmojiMenuExtension extends Suggestion {
       ),
       closeRegex:
         /(?:^|\s|\():(([0-9a-zA-Z_+-]*\s+)|(\s+[0-9a-zA-Z_+-]+)|[^0-9a-zA-Z_+-]+)$/,
-      enabledInTable: true,
     };
   }
 

app/editor/extensions/FindAndReplace.tsx

@@ -156,14 +156,10 @@ export default class FindAndReplaceExtension extends Extension {
   }
 
   private get findRegExp() {
-    try {
+    return RegExp(
-      return RegExp(
+      this.searchTerm.replace(/\\+$/, ""),
-        this.searchTerm.replace(/\\+$/, ""),
+      !this.options.caseSensitive ? "gui" : "gu"
-        !this.options.caseSensitive ? "gui" : "gu"
+    );
-      );
-    } catch (err) {
-      return RegExp("");
-    }
   }
 
   private goToMatch(direction: number): Command {
@@ -250,15 +246,19 @@ export default class FindAndReplaceExtension extends Extension {
       const search = this.findRegExp;
       let m;
 
-      while ((m = search.exec(text))) {
+      try {
-        if (m[0] === "") {
+        while ((m = search.exec(text))) {
-          break;
+          if (m[0] === "") {
-        }
+            break;
+          }
 
-        this.results.push({
+          this.results.push({
-          from: pos + m.index,
+            from: pos + m.index,
-          to: pos + m.index + m[0].length,
+            to: pos + m.index + m[0].length,
-        });
+          });
+        }
+      } catch (e) {
+        // Invalid RegExp
       }
     });
   }

app/editor/extensions/Keys.ts

@@ -8,7 +8,7 @@ import {
   Command,
 } from "prosemirror-state";
 import Extension from "@shared/editor/lib/Extension";
-import isInCode from "@shared/editor/queries/isInCode";
+import { isInCode } from "@shared/editor/queries/isInCode";
 
 export default class Keys extends Extension {
   get name() {

app/editor/extensions/MentionMenu.tsx

@@ -10,7 +10,6 @@ export default class MentionMenuExtension extends Suggestion {
       // ported from https://github.com/tc39/proposal-regexp-unicode-property-escapes#unicode-aware-version-of-w
       openRegex: /(?:^|\s|\()@([\p{L}\p{M}\d]+)?$/u,
       closeRegex: /(?:^|\s|\()@(([\p{L}\p{M}\d]*\s+)|(\s+[\p{L}\p{M}\d]+))$/u,
-      enabledInTable: true,
     };
   }
 

app/editor/extensions/PasteHandler.ts

@@ -5,8 +5,10 @@ import { LANGUAGES } from "@shared/editor/extensions/Prism";
 import Extension from "@shared/editor/lib/Extension";
 import isMarkdown from "@shared/editor/lib/isMarkdown";
 import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
-import isInCode from "@shared/editor/queries/isInCode";
+import { isInCode } from "@shared/editor/queries/isInCode";
-import isInList from "@shared/editor/queries/isInList";
+import { isInList } from "@shared/editor/queries/isInList";
+import { IconType } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isDocumentUrl, isUrl } from "@shared/utils/urls";
 import stores from "~/stores";
@@ -179,9 +181,12 @@ export default class PasteHandler extends Extension {
                       if (document) {
                         const { hash } = new URL(text);
 
-                        const title = `${
+                        const hasEmoji =
-                          document.emoji ? document.emoji + " " : ""
+                          determineIconType(document.icon) === IconType.Emoji;
-                        }${document.titleWithDefault}`;
+
+                        const title = `${hasEmoji ? document.icon + " " : ""}${
+                          document.titleWithDefault
+                        }`;
                         insertLink(`${document.path}${hash}`, title);
                       }
                     })

app/editor/extensions/SmartText.ts

@@ -4,8 +4,8 @@ import { InputRule } from "@shared/editor/lib/InputRule";
 
 const rightArrow = new InputRule(/->$/, "→");
 const emdash = new InputRule(/--$/, "—");
-const oneHalf = new InputRule(/1\/2$/, "½");
+const oneHalf = new InputRule(/(?:^|\s)1\/2$/, "½");
-const threeQuarters = new InputRule(/3\/4$/, "¾");
+const threeQuarters = new InputRule(/(?:^|\s)3\/4$/, "¾");
 const copyright = new InputRule(/\(c\)$/, "©️");
 const registered = new InputRule(/\(r\)$/, "®️");
 const trademarked = new InputRule(/\(tm\)$/, "™️");

app/editor/extensions/Suggestion.ts

@@ -2,10 +2,9 @@ import { action, observable } from "mobx";
 import { InputRule } from "prosemirror-inputrules";
 import { NodeType, Schema } from "prosemirror-model";
 import { EditorState, Plugin } from "prosemirror-state";
-import { isInTable } from "prosemirror-tables";
 import Extension from "@shared/editor/lib/Extension";
 import { SuggestionsMenuPlugin } from "@shared/editor/plugins/Suggestions";
-import isInCode from "@shared/editor/queries/isInCode";
+import { isInCode } from "@shared/editor/queries/isInCode";
 
 export default class Suggestion extends Extension {
   state: {
@@ -50,8 +49,7 @@ export default class Suggestion extends Extension {
           match &&
           (parent.type.name === "paragraph" ||
             parent.type.name === "heading") &&
-          (!isInCode(state) || this.options.enabledInCode) &&
+          (!isInCode(state) || this.options.enabledInCode)
-          (!isInTable(state) || this.options.enabledInTable)
         ) {
           this.state.open = true;
           this.state.query = match[1];

app/editor/index.tsx

@@ -402,8 +402,8 @@ export class Editor extends React.PureComponent<
       schema: this.schema,
       doc,
       plugins: [
-        ...this.plugins,
         ...this.keymaps,
+        ...this.plugins,
         dropCursor({
           color: this.props.theme.cursor,
         }),
@@ -618,6 +618,13 @@ export class Editor extends React.PureComponent<
    */
   public getHeadings = () => ProsemirrorHelper.getHeadings(this.view.state.doc);
 
+  /**
+   * Return the images in the current editor.
+   *
+   * @returns A list of images in the document
+   */
+  public getImages = () => ProsemirrorHelper.getImages(this.view.state.doc);
+
   /**
    * Return the tasks/checkmarks in the current editor.
    *
@@ -633,29 +640,63 @@ export class Editor extends React.PureComponent<
   public getComments = () => ProsemirrorHelper.getComments(this.view.state.doc);
 
   /**
-   * Remove a specific comment mark from the document.
+   * Remove all marks related to a specific comment from the document.
    *
    * @param commentId The id of the comment to remove
    */
   public removeComment = (commentId: string) => {
     const { state, dispatch } = this.view;
-    let found = false;
+    const tr = state.tr;
+
     state.doc.descendants((node, pos) => {
-      if (!node.isInline || found) {
+      if (!node.isInline) {
         return;
       }
 
       const mark = node.marks.find(
-        (mark) =>
+        (m) => m.type === state.schema.marks.comment && m.attrs.id === commentId
-          mark.type === state.schema.marks.comment &&
-          mark.attrs.id === commentId
       );
 
       if (mark) {
-        dispatch(state.tr.removeMark(pos, pos + node.nodeSize, mark));
+        tr.removeMark(pos, pos + node.nodeSize, mark);
-        found = true;
       }
     });
+
+    dispatch(tr);
+  };
+
+  /**
+   * Update all marks related to a specific comment in the document.
+   *
+   * @param commentId The id of the comment to remove
+   * @param attrs The attributes to update
+   */
+  public updateComment = (commentId: string, attrs: { resolved: boolean }) => {
+    const { state, dispatch } = this.view;
+    const tr = state.tr;
+
+    state.doc.descendants((node, pos) => {
+      if (!node.isInline) {
+        return;
+      }
+
+      const mark = node.marks.find(
+        (m) => m.type === state.schema.marks.comment && m.attrs.id === commentId
+      );
+
+      if (mark) {
+        const from = pos;
+        const to = pos + node.nodeSize;
+        const newMark = state.schema.marks.comment.create({
+          ...mark.attrs,
+          ...attrs,
+        });
+
+        tr.removeMark(from, to, mark).addMark(from, to, newMark);
+      }
+    });
+
+    dispatch(tr);
   };
 
   /**
@@ -801,6 +842,7 @@ const EditorContainer = styled(Styles)<{
     css`
       #comment-${props.focusedCommentId} {
         background: ${transparentize(0.5, props.theme.brand.marine)};
+        border-bottom: 2px solid ${props.theme.commentMarkBackground};
       }
     `}
 

app/editor/menus/divider.tsx

@@ -1,7 +1,7 @@
 import { PageBreakIcon, HorizontalRuleIcon } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
-import isNodeActive from "@shared/editor/queries/isNodeActive";
+import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
 

app/editor/menus/formatting.tsx

@@ -19,13 +19,15 @@ import {
   Heading3Icon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
-import { isInTable } from "prosemirror-tables";
 import * as React from "react";
-import isInCode from "@shared/editor/queries/isInCode";
+import Highlight from "@shared/editor/marks/Highlight";
-import isInList from "@shared/editor/queries/isInList";
+import { getMarksBetween } from "@shared/editor/queries/getMarksBetween";
-import isMarkActive from "@shared/editor/queries/isMarkActive";
+import { isInCode } from "@shared/editor/queries/isInCode";
-import isNodeActive from "@shared/editor/queries/isNodeActive";
+import { isInList } from "@shared/editor/queries/isInList";
+import { isMarkActive } from "@shared/editor/queries/isMarkActive";
+import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
+import CircleIcon from "~/components/Icons/CircleIcon";
 import { Dictionary } from "~/hooks/useDictionary";
 
 export default function formattingMenuItems(
@@ -35,11 +37,15 @@ export default function formattingMenuItems(
   dictionary: Dictionary
 ): MenuItem[] {
   const { schema } = state;
-  const isTable = isInTable(state);
-  const isList = isInList(state);
   const isCode = isInCode(state);
   const isCodeBlock = isInCode(state, { onlyBlock: true });
-  const allowBlocks = !isTable && !isList;
+  const isEmpty = state.selection.empty;
+
+  const highlight = getMarksBetween(
+    state.selection.from,
+    state.selection.to,
+    state
+  ).find(({ mark }) => mark.type.name === "highlight");
 
   return [
     {
@@ -47,50 +53,60 @@ export default function formattingMenuItems(
       tooltip: dictionary.placeholder,
       icon: <InputIcon />,
       active: isMarkActive(schema.marks.placeholder),
-      visible: isTemplate,
+      visible: isTemplate && (!isMobile || !isEmpty),
     },
     {
       name: "separator",
-      visible: isTemplate,
+      visible: isTemplate && (!isMobile || !isEmpty),
     },
     {
       name: "strong",
       tooltip: dictionary.strong,
       icon: <BoldIcon />,
       active: isMarkActive(schema.marks.strong),
-      visible: !isCode,
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       name: "em",
       tooltip: dictionary.em,
       icon: <ItalicIcon />,
       active: isMarkActive(schema.marks.em),
-      visible: !isCode,
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       name: "strikethrough",
       tooltip: dictionary.strikethrough,
       icon: <StrikethroughIcon />,
       active: isMarkActive(schema.marks.strikethrough),
-      visible: !isCode,
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
-      name: "highlight",
       tooltip: dictionary.mark,
-      icon: <HighlightIcon />,
+      icon: highlight ? (
-      active: isMarkActive(schema.marks.highlight),
+        <CircleIcon color={highlight.mark.attrs.color} />
-      visible: !isTemplate && !isCode,
+      ) : (
+        <HighlightIcon />
+      ),
+      active: () => !!highlight,
+      visible: !isCode && (!isMobile || !isEmpty),
+      children: Highlight.colors.map((color, index) => ({
+        name: "highlight",
+        label: Highlight.colorNames[index],
+        icon: <CircleIcon retainColor color={color} />,
+        active: isMarkActive(schema.marks.highlight, { color }),
+        attrs: { color },
+      })),
     },
     {
       name: "code_inline",
       tooltip: dictionary.codeInline,
       icon: <CodeIcon />,
       active: isMarkActive(schema.marks.code_inline),
-      visible: !isCodeBlock,
+      visible: !isCodeBlock && (!isMobile || !isEmpty),
     },
     {
       name: "separator",
-      visible: allowBlocks && !isCode,
+      visible: !isCodeBlock,
     },
     {
       name: "heading",
@@ -98,7 +114,7 @@ export default function formattingMenuItems(
       icon: <Heading1Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 1 }),
       attrs: { level: 1 },
-      visible: allowBlocks && !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "heading",
@@ -106,7 +122,7 @@ export default function formattingMenuItems(
       icon: <Heading2Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 2 }),
       attrs: { level: 2 },
-      visible: allowBlocks && !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "heading",
@@ -114,7 +130,7 @@ export default function formattingMenuItems(
       icon: <Heading3Icon />,
       active: isNodeActive(schema.nodes.heading, { level: 3 }),
       attrs: { level: 3 },
-      visible: allowBlocks && !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "blockquote",
@@ -122,11 +138,11 @@ export default function formattingMenuItems(
       icon: <BlockQuoteIcon />,
       active: isNodeActive(schema.nodes.blockquote),
       attrs: { level: 2 },
-      visible: allowBlocks && !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "separator",
-      visible: (allowBlocks || isList) && !isCode,
+      visible: !isCodeBlock,
     },
     {
       name: "checkbox_list",
@@ -134,37 +150,51 @@ export default function formattingMenuItems(
       icon: <TodoListIcon />,
       keywords: "checklist checkbox task",
       active: isNodeActive(schema.nodes.checkbox_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "bullet_list",
       tooltip: dictionary.bulletList,
       icon: <BulletedListIcon />,
       active: isNodeActive(schema.nodes.bullet_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "ordered_list",
       tooltip: dictionary.orderedList,
       icon: <OrderedListIcon />,
       active: isNodeActive(schema.nodes.ordered_list),
-      visible: (allowBlocks || isList) && !isCode,
+      visible: !isCodeBlock && (!isMobile || isEmpty),
     },
     {
       name: "outdentList",
       tooltip: dictionary.outdent,
       icon: <OutdentIcon />,
-      visible: isList && isMobile,
+      visible:
+        isMobile && isInList(state, { types: ["ordered_list", "bullet_list"] }),
     },
     {
       name: "indentList",
       tooltip: dictionary.indent,
       icon: <IndentIcon />,
-      visible: isList && isMobile,
+      visible:
+        isMobile && isInList(state, { types: ["ordered_list", "bullet_list"] }),
+    },
+    {
+      name: "outdentCheckboxList",
+      tooltip: dictionary.outdent,
+      icon: <OutdentIcon />,
+      visible: isMobile && isInList(state, { types: ["checkbox_list"] }),
+    },
+    {
+      name: "indentCheckboxList",
+      tooltip: dictionary.indent,
+      icon: <IndentIcon />,
+      visible: isMobile && isInList(state, { types: ["checkbox_list"] }),
     },
     {
       name: "separator",
-      visible: !isCode,
+      visible: !isCodeBlock,
     },
     {
       name: "link",
@@ -172,24 +202,25 @@ export default function formattingMenuItems(
       icon: <LinkIcon />,
       active: isMarkActive(schema.marks.link),
       attrs: { href: "" },
-      visible: !isCode,
+      visible: !isCodeBlock && (!isMobile || !isEmpty),
     },
     {
       name: "comment",
       tooltip: dictionary.comment,
       icon: <CommentIcon />,
       label: isCodeBlock ? dictionary.comment : undefined,
-      active: isMarkActive(schema.marks.comment),
+      active: isMarkActive(schema.marks.comment, { resolved: false }),
+      visible: !isMobile || !isEmpty,
     },
     {
       name: "separator",
-      visible: isCode && !isCodeBlock,
+      visible: isCode && !isCodeBlock && (!isMobile || !isEmpty),
     },
     {
       name: "copyToClipboard",
       icon: <CopyIcon />,
       tooltip: dictionary.copy,
-      visible: isCode && !isCodeBlock,
+      visible: isCode && !isCodeBlock && (!isMobile || !isEmpty),
     },
   ];
 }

app/editor/menus/image.tsx

@@ -9,7 +9,7 @@ import {
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
-import isNodeActive from "@shared/editor/queries/isNodeActive";
+import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
 

app/editor/menus/readOnly.tsx

@@ -1,7 +1,7 @@
 import { CommentIcon } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
-import isMarkActive from "@shared/editor/queries/isMarkActive";
+import { isMarkActive } from "@shared/editor/queries/isMarkActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
 

app/editor/menus/table.tsx

@@ -1,10 +1,32 @@
-import { TrashIcon } from "outline-icons";
+import { AlignFullWidthIcon, TrashIcon } from "outline-icons";
+import { EditorState } from "prosemirror-state";
 import * as React from "react";
-import { MenuItem } from "@shared/editor/types";
+import { isNodeActive } from "@shared/editor/queries/isNodeActive";
+import { MenuItem, TableLayout } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
 
-export default function tableMenuItems(dictionary: Dictionary): MenuItem[] {
+export default function tableMenuItems(
+  state: EditorState,
+  dictionary: Dictionary
+): MenuItem[] {
+  const { schema } = state;
+  const isFullWidth = isNodeActive(schema.nodes.table, {
+    layout: TableLayout.fullWidth,
+  })(state);
+
   return [
+    {
+      name: "setTableAttr",
+      tooltip: isFullWidth
+        ? dictionary.alignDefaultWidth
+        : dictionary.alignFullWidth,
+      icon: <AlignFullWidthIcon />,
+      attrs: isFullWidth ? { layout: null } : { layout: TableLayout.fullWidth },
+      active: () => isFullWidth,
+    },
+    {
+      name: "separator",
+    },
     {
       name: "deleteTable",
       tooltip: dictionary.deleteTable,

app/editor/menus/tableCol.tsx

@@ -7,11 +7,12 @@ import {
   InsertRightIcon,
   ArrowIcon,
   MoreIcon,
+  TableHeaderColumnIcon,
 } from "outline-icons";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
 import styled from "styled-components";
-import isNodeActive from "@shared/editor/queries/isNodeActive";
+import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";
 
@@ -78,15 +79,23 @@ export default function tableColMenuItems(
     {
       icon: <MoreIcon />,
       children: [
+        {
+          name: "toggleHeaderColumn",
+          label: dictionary.toggleHeader,
+          icon: <TableHeaderColumnIcon />,
+          visible: index === 0,
+        },
         {
           name: rtl ? "addColumnAfter" : "addColumnBefore",
           label: rtl ? dictionary.addColumnAfter : dictionary.addColumnBefore,
           icon: <InsertLeftIcon />,
+          attrs: { index },
         },
         {
           name: rtl ? "addColumnBefore" : "addColumnAfter",
           label: rtl ? dictionary.addColumnBefore : dictionary.addColumnAfter,
           icon: <InsertRightIcon />,
+          attrs: { index },
         },
         {
           name: "deleteColumn",