rename source owner, remove actorId

* mention issue works

* pr and loading works

* error node

* tweak mention display

* handle multiple creation error

* tidy

* store unfurl in mention attrs

* simplify mention code creation

* test fix

* base feedback

* update node when pos is available

* delete local UnfurlsStore

* use unfurl from store

* Optimize lodash isMatch import statement

* fix: Copy/paste of issue mentions
fix: Icon alignment
fix: Error and loading mentions are unselectable

* Switch order in paste menu

---------

Co-authored-by: Tom Moor <tom@getoutline.com>

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
+import { IssueStatusIcon } from "@shared/components/IssueStatusIcon";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import { IssueStatusIcon } from "../Icons/IssueStatusIcon";
 import Text from "../Text";
 import Time from "../Time";
 import {

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
+import { PullRequestIcon } from "@shared/components/PullRequestIcon";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import { PullRequestIcon } from "../Icons/PullRequestIcon";
 import Text from "../Text";
 import Time from "../Time";
 import {

app/components/Text.ts

@@ -1,73 +1,3 @@
-import styled, { css } from "styled-components";
-import { ellipsis } from "@shared/styles";
-
-type Props = {
-  /** The type of text to render */
-  type?: "secondary" | "tertiary" | "danger";
-  /** The size of the text */
-  size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
-  /** The direction of the text (defaults to ltr) */
-  dir?: "ltr" | "rtl" | "auto";
-  /** Whether the text should be selectable (defaults to false) */
-  selectable?: boolean;
-  /** The font weight of the text */
-  weight?: "xbold" | "bold" | "normal";
-  /** Whether the text should be italic */
-  italic?: boolean;
-  /** Whether the text should be truncated with an ellipsis */
-  ellipsis?: boolean;
-  /** Whether the text should be monospaced */
-  monospace?: boolean;
-};
-
-/**
- * Use this component for all interface text that should not be selectable
- * by the user, this is the majority of UI text explainers, notes, headings.
- */
-const Text = styled.span<Props>`
-  margin-top: 0;
-  text-align: ${(props) => (props.dir ? props.dir : "inherit")};
-  color: ${(props) =>
-    props.type === "secondary"
-      ? props.theme.textSecondary
-      : props.type === "tertiary"
-      ? props.theme.textTertiary
-      : props.type === "danger"
-      ? props.theme.brand.red
-      : props.theme.text};
-  font-size: ${(props) =>
-    props.size === "xlarge"
-      ? "26px"
-      : props.size === "large"
-      ? "18px"
-      : props.size === "medium"
-      ? "16px"
-      : props.size === "small"
-      ? "14px"
-      : props.size === "xsmall"
-      ? "13px"
-      : "inherit"};
-
-  ${(props) =>
-    props.weight &&
-    css`
-      font-weight: ${props.weight === "xbold"
-        ? 600
-        : props.weight === "bold"
-        ? 500
-        : props.weight === "normal"
-        ? 400
-        : "inherit"};
-    `}
-
-  font-style: ${(props) => (props.italic ? "italic" : "normal")};
-  font-family: ${(props) =>
-    props.monospace ? props.theme.fontFamilyMono : "inherit"};
-
-  white-space: normal;
-  user-select: ${(props) => (props.selectable ? "text" : "none")};
-
-  ${(props) => props.ellipsis && ellipsis()}
-`;
+import Text from "@shared/components/Text";
 
 export default Text;

app/editor/components/CreateIssueDialog.tsx

@@ -0,0 +1,192 @@
+import { IssueSource } from "@shared/schema";
+import { ellipsis } from "@shared/styles";
+import { observer } from "mobx-react";
+import React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Button from "~/components/Button";
+import Flex from "~/components/Flex";
+import Modal from "~/components/Modal";
+import PluginIcon from "~/components/PluginIcon";
+import Text from "~/components/Text";
+import useBoolean from "~/hooks/useBoolean";
+import useRequest from "~/hooks/useRequest";
+import { client } from "~/utils/ApiClient";
+
+type Props = {
+  issueTitle: string;
+  open: boolean;
+  onCreate: (source: IssueSource) => Promise<void>;
+  onClose: () => void;
+};
+
+export const CreateIssueDialog = observer(
+  ({ issueTitle, open, onCreate, onClose }: Props) => {
+    const { t } = useTranslation();
+    const [isCreating, setCreating, unsetCreating] = useBoolean();
+    const [selectedSource, selectSource] = React.useState<IssueSource>();
+
+    const {
+      data: sources,
+      loading,
+      request,
+    } = useRequest<IssueSource[]>(
+      React.useCallback(async () => {
+        try {
+          const res = await client.post("/issues.list_sources");
+          return res.data;
+        } catch (err) {
+          toast.error(t("Couldn't load issue sources, try again?"));
+          throw err;
+        }
+      }, [t])
+    );
+
+    const handleCreateIssue = React.useCallback(async () => {
+      setCreating();
+      await onCreate(selectedSource!);
+      unsetCreating();
+    }, [selectedSource, onCreate, setCreating, unsetCreating]);
+
+    React.useEffect(() => {
+      if (open) {
+        void request();
+      } else {
+        selectSource(undefined);
+      }
+    }, [open, request]);
+
+    return (
+      <Modal
+        title={t("Create issue")}
+        isOpen={open}
+        onRequestClose={onClose}
+        fullscreen={false}
+      >
+        <FlexContainer column>
+          <ListContainer>
+            {loading ? (
+              "Loading..."
+            ) : !sources?.length ? (
+              "No source available"
+            ) : (
+              <Flex column gap={6}>
+                {sources.map((source) => (
+                  <SourceItem
+                    key={source.id}
+                    source={source}
+                    selected={source === selectedSource}
+                    onSelect={selectSource}
+                  />
+                ))}
+              </Flex>
+            )}
+          </ListContainer>
+          <Footer justify="space-between" align="center" gap={8}>
+            <StyledText type="secondary">
+              {selectedSource ? (
+                <Trans
+                  defaults="Create issue in <em>{{ location }}</em>"
+                  values={{
+                    location: `${selectedSource.owner.name}/${selectedSource.name} `,
+                  }}
+                  components={{
+                    em: <strong />,
+                  }}
+                />
+              ) : (
+                t("Select a source to create issue")
+              )}
+            </StyledText>
+            <Button
+              disabled={!selectedSource || isCreating}
+              onClick={handleCreateIssue}
+            >
+              {isCreating ? `${t("Creating")}…` : t("Create")}
+            </Button>
+          </Footer>
+        </FlexContainer>
+      </Modal>
+    );
+  }
+);
+
+const SourceItem = ({
+  source,
+  selected,
+  onSelect,
+}: {
+  source: IssueSource;
+  selected: boolean;
+  onSelect: (source: IssueSource) => void;
+}) => (
+  <SourceItemWrapper
+    justify="space-between"
+    onClick={() => onSelect(source)}
+    $selected={selected}
+  >
+    <Text>{source.name}</Text>
+    <Flex align="center" gap={2}>
+      <PluginIcon id={source.service} size={20} />
+      <SourceAccount type="tertiary" size="xsmall">
+        {source.owner.name}
+      </SourceAccount>
+    </Flex>
+  </SourceItemWrapper>
+);
+
+export const FlexContainer = styled(Flex)`
+  margin-left: -24px;
+  margin-right: -24px;
+  margin-bottom: -24px;
+  outline: none;
+`;
+
+const ListContainer = styled.div`
+  height: 65vh;
+  padding: 0 24px 12px;
+  overflow: scroll;
+
+  ${breakpoint("tablet")`
+    height: 40vh;
+  `}
+`;
+
+const SourceAccount = styled(Text)``;
+
+const SourceItemWrapper = styled(Flex)<{ $selected: boolean }>`
+  font-size: 16px;
+  cursor: var(--pointer);
+  padding: 12px;
+  border-radius: 6px;
+
+  ${(props) =>
+    props.$selected &&
+    `
+		background: ${props.theme.accent};
+		color: ${props.theme.white};
+
+		${SourceAccount} {
+			color: ${props.theme.white};
+		}
+
+	`}
+
+  ${breakpoint("tablet")`
+		padding: 4px 6px;
+		font-size: 15px;
+	`}
+`;
+
+const Footer = styled(Flex)`
+  height: 64px;
+  border-top: 1px solid ${(props) => props.theme.horizontalRule};
+  padding: 0 24px;
+`;
+
+const StyledText = styled(Text)`
+  ${ellipsis()}
+  margin-bottom: 0;
+`;

app/editor/components/PasteMenu.tsx

@@ -1,7 +1,15 @@
-import { LinkIcon } from "outline-icons";
+import { observer } from "mobx-react";
+import { EmailIcon, LinkIcon } from "outline-icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { v4 } from "uuid";
 import { EmbedDescriptor } from "@shared/editor/embeds";
+import { MenuItem } from "@shared/editor/types";
+import { MentionType } from "@shared/types";
+import Integration from "~/models/Integration";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import useStores from "~/hooks/useStores";
+import { determineMentionType, isURLMentionable } from "~/utils/mention";
 import SuggestionsMenu, {
   Props as SuggestionsMenuProps,
 } from "./SuggestionsMenu";
@@ -15,34 +23,65 @@ type Props = Omit<
   embeds: EmbedDescriptor[];
 };
 
-const PasteMenu = ({ embeds, ...props }: Props) => {
+export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
   const { t } = useTranslation();
+  const { integrations } = useStores();
+  const user = useCurrentUser();
+
+  let mentionType: MentionType | undefined;
+  const url = pastedText ? new URL(pastedText) : undefined;
+
+  if (url) {
+    const integration = integrations.find((intg: Integration) =>
+      isURLMentionable({ url, integration: intg })
+    );
+
+    mentionType = integration
+      ? determineMentionType({ url, integration })
+      : undefined;
+  }
 
   const embed = React.useMemo(() => {
     for (const e of embeds) {
-      const matches = e.matcher(props.pastedText);
+      const matches = e.matcher(pastedText);
       if (matches) {
         return e;
       }
     }
     return;
-  }, [embeds, props.pastedText]);
+  }, [embeds, pastedText]);
 
   const items = React.useMemo(
-    () => [
-      {
-        name: "noop",
-        title: t("Keep as link"),
-        icon: <LinkIcon />,
-      },
-      {
-        name: "embed",
-        title: t("Embed"),
-        icon: embed?.icon,
-        keywords: embed?.keywords,
-      },
-    ],
-    [embed, t]
+    () =>
+      [
+        {
+          name: "noop",
+          title: t("Keep as link"),
+          icon: <LinkIcon />,
+        },
+        {
+          name: "mention",
+          title: t("Mention"),
+          icon: <EmailIcon />,
+          visible: !!mentionType,
+          attrs: {
+            id: v4(),
+            type: mentionType,
+            label: pastedText,
+            href: pastedText,
+            modelId: v4(),
+            actorId: user.id,
+          },
+          appendSpace: true,
+        },
+        {
+          name: "embed",
+          title: t("Embed"),
+          icon: embed?.icon,
+          keywords: embed?.keywords,
+        },
+      ] satisfies MenuItem[],
+    [t, embed, mentionType, pastedText, user]
   );
 
   return (
@@ -52,9 +91,7 @@ const PasteMenu = ({ embeds, ...props }: Props) => {
       filterable={false}
       renderMenuItem={(item, _index, options) => (
         <SuggestionsMenuItem
-          onClick={() => {
-            props.onSelect?.(item);
-          }}
+          onClick={options.onClick}
           selected={options.selected}
           title={item.title}
           icon={item.icon}
@@ -63,6 +100,4 @@ const PasteMenu = ({ embeds, ...props }: Props) => {
       items={items}
     />
   );
-};
-
-export default PasteMenu;
+});

app/editor/components/SelectionToolbar.tsx

@@ -9,6 +9,7 @@ import { isMarkActive } from "@shared/editor/queries/isMarkActive";
 import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { getColumnIndex, getRowIndex } from "@shared/editor/queries/table";
 import { MenuItem } from "@shared/editor/types";
+import { useRecentIssueSources } from "~/editor/hooks/useRecentIssueSources";
 import useBoolean from "~/hooks/useBoolean";
 import useDictionary from "~/hooks/useDictionary";
 import useEventListener from "~/hooks/useEventListener";
@@ -106,6 +107,7 @@ export default function SelectionToolbar(props: Props) {
   const isActive = useIsActive(view.state) || isMobile;
   const isDragging = useIsDragging();
   const previousIsActive = usePrevious(isActive);
+  const { issueSources: recentIssueSources } = useRecentIssueSources();
 
   React.useEffect(() => {
     // Trigger callbacks when the toolbar is opened or closed
@@ -213,7 +215,13 @@ export default function SelectionToolbar(props: Props) {
   } else if (isNoticeSelection && selection.empty) {
     items = getNoticeMenuItems(state, readOnly, dictionary);
   } else {
-    items = getFormattingMenuItems(state, isTemplate, isMobile, dictionary);
+    items = getFormattingMenuItems(
+      state,
+      isTemplate,
+      isMobile,
+      recentIssueSources,
+      dictionary
+    );
   }
 
   // Some extensions may be disabled, remove corresponding items

app/editor/extensions/CreateIssue.tsx

@@ -0,0 +1,303 @@
+import Extension from "@shared/editor/lib/Extension";
+import { isRemoteTransaction } from "@shared/editor/lib/multiplayer";
+import { recreateTransform } from "@shared/editor/lib/prosemirror-recreate-transform";
+import { isInCode } from "@shared/editor/queries/isInCode";
+import { IssueSource } from "@shared/schema";
+import {
+  MentionPlaceholder,
+  MentionType,
+  UnfurlResourceType,
+  UnfurlResponse,
+} from "@shared/types";
+import { t } from "i18next";
+import { action, observable } from "mobx";
+import {
+  Command,
+  EditorState,
+  Plugin,
+  PluginKey,
+  TextSelection,
+} from "prosemirror-state";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import React from "react";
+import { toast } from "sonner";
+import { Primitive } from "utility-types";
+import { v4 } from "uuid";
+import stores from "~/stores";
+import { client } from "~/utils/ApiClient";
+import { CreateIssueDialog } from "../components/CreateIssueDialog";
+import { addRecentIssueSource } from "../hooks/useRecentIssueSources";
+
+export default class CreateIssue extends Extension {
+  private state: {
+    open: boolean;
+    title: string;
+  } = observable({
+    open: false,
+    title: "",
+  });
+
+  private key = new PluginKey(this.name);
+
+  get name() {
+    return "issue";
+  }
+
+  get plugins() {
+    return [
+      new Plugin({
+        key: this.key,
+        state: {
+          init: () => DecorationSet.empty,
+          apply: (tr, set) => {
+            // See if the transaction adds, replaces, or removes any placeholders.
+            const meta = tr.getMeta(this.key);
+
+            // We only want a single paste placeholder at a time, so if we're adding a new
+            // placeholder we can just return a new DecorationSet and avoid mapping logic.
+            if (meta?.add) {
+              const { from, to, id } = meta.add;
+              const decorations = [
+                Decoration.inline(
+                  from,
+                  to,
+                  {},
+                  {
+                    id,
+                  }
+                ),
+              ];
+              return DecorationSet.create(tr.doc, decorations);
+            }
+
+            let mapping = tr.mapping;
+            const hasDecorations = set.find().length;
+
+            if (hasDecorations && (isRemoteTransaction(tr) || meta)) {
+              try {
+                mapping = recreateTransform(tr.before, tr.doc, {
+                  complexSteps: true,
+                  wordDiffs: false,
+                  simplifyDiff: true,
+                }).mapping;
+              } catch (err) {
+                // eslint-disable-next-line no-console
+                console.warn("Failed to recreate transform: ", err);
+              }
+            }
+
+            set = set.map(mapping, tr.doc);
+
+            if (meta?.replace) {
+              const { id } = meta.replace;
+              const decorations = set.find(
+                undefined,
+                undefined,
+                (spec) => spec.id === id
+              );
+              return DecorationSet.create(tr.doc, decorations);
+            }
+
+            if (meta?.remove) {
+              const { id } = meta.remove;
+              const decorations = set.find(
+                undefined,
+                undefined,
+                (spec) => spec.id === id
+              );
+              return set.remove(decorations);
+            }
+
+            return set;
+          },
+        },
+      }),
+    ];
+  }
+
+  keys(): Record<string, Command> {
+    return {
+      "Mod-Alt-i": (state, dispatch) => {
+        const isCode = isInCode(state);
+        const isEmpty = state.selection.empty;
+
+        if (isCode || isEmpty) {
+          return false;
+        }
+
+        const title = state.doc.cut(
+          state.selection.from,
+          state.selection.to
+        ).textContent;
+        const { from } = state.selection;
+        const to = from + title.length;
+
+        const tr = state.tr
+          .setSelection(TextSelection.near(state.doc.resolve(from)))
+          .setMeta(this.key, { add: { from, to, id: title } });
+        dispatch?.(tr);
+
+        this.openDialog(title);
+
+        return true;
+      },
+    };
+  }
+
+  commands() {
+    return (attrs: Record<string, Primitive>): Command =>
+      action((state, dispatch) => {
+        const title = attrs.title as string;
+        const source = attrs.source
+          ? (JSON.parse(attrs.source as string) as IssueSource)
+          : undefined;
+
+        this.state.title = title;
+
+        const { from } = state.selection;
+        const to = from + title.length;
+
+        const tr = state.tr
+          .setSelection(TextSelection.near(state.doc.resolve(to)))
+          .setMeta(this.key, { add: { from, to, id: title } });
+
+        dispatch?.(tr);
+
+        if (source) {
+          tr.replaceWith(
+            from,
+            to,
+            state.schema.nodes.mention.create({
+              id: v4(),
+              type: MentionPlaceholder,
+              label: title,
+              href: title,
+              modelId: v4(),
+              actorId: stores.auth.currentUserId,
+            })
+          ).setMeta(this.key, { replace: { id: title } });
+        }
+
+        dispatch?.(tr);
+
+        if (source) {
+          void this.createIssue(source);
+        } else {
+          this.openDialog(title);
+        }
+
+        return true;
+      });
+  }
+
+  widget = () => (
+    <CreateIssueDialog
+      issueTitle={this.state.title}
+      open={this.state.open}
+      onCreate={this.createIssue}
+      onClose={this.closeDialog}
+    />
+  );
+
+  private createIssue = async (source: IssueSource) => {
+    try {
+      addRecentIssueSource(source);
+      const res = await client.post("/issues.create", {
+        title: this.state.title,
+        source,
+      });
+      this.addMentionNode(res.data);
+      toast.success(t("Issue created"));
+    } catch (err) {
+      this.removeDecorations(source);
+      toast.error(t("Couldn’t create the issue, try again?"));
+    }
+  };
+
+  private addMentionNode = (
+    issue: UnfurlResponse[UnfurlResourceType.Issue]
+  ) => {
+    const { view } = this.editor;
+    const { state } = view;
+
+    const result = this.findPlaceholder(state, this.state.title);
+
+    if (result) {
+      const tr = state.tr.deleteRange(result[0], result[1]);
+      view.dispatch(
+        tr
+          .setSelection(TextSelection.near(tr.doc.resolve(result[0])))
+          .setMeta(this.key, {
+            remove: { id: this.state.title },
+          })
+      );
+    }
+
+    this.editor.commands.mention({
+      id: v4(),
+      type: MentionType.Issue,
+      label: this.state.title,
+      href: issue.url,
+      modelId: v4(),
+      actorId: stores.auth.currentUserId,
+    });
+  };
+
+  private removeDecorations = action((source: IssueSource) => {
+    const { view } = this.editor;
+    const { state } = view;
+
+    const tr = state.tr.setMeta(this.key, {
+      remove: { id: this.state.title },
+    });
+
+    const result = this.findPlaceholder(state, this.state.title);
+
+    // Placeholder node would have been inserted in recent issue menu flow only.
+    // We want to reset it with the selected text.
+    if (source && result) {
+      tr.replaceWith(
+        result[0],
+        result[1],
+        state.schema.nodeFromJSON({ type: "text", text: this.state.title })
+      );
+    }
+
+    view.dispatch(tr);
+
+    this.state.title = "";
+  });
+
+  private openDialog = action((title: string) => {
+    this.state.title = title;
+    this.state.open = true;
+  });
+
+  private closeDialog = action(() => {
+    const { view } = this.editor;
+    const { state } = view;
+
+    const result = this.findPlaceholder(state, this.state.title);
+
+    if (result) {
+      const tr = state.tr
+        .setSelection(TextSelection.near(state.doc.resolve(result[0])))
+        .setMeta(this.key, {
+          remove: { id: this.state.title },
+        });
+      view.dispatch(tr);
+    }
+
+    this.state.title = "";
+    this.state.open = false;
+  });
+
+  private findPlaceholder = (
+    state: EditorState,
+    id: string
+  ): [number, number] | null => {
+    const decos = this.key.getState(state) as DecorationSet;
+    const found = decos?.find(undefined, undefined, (spec) => spec.id === id);
+    return found?.length ? [found[0].from, found[0].to] : null;
+  };
+}

app/editor/extensions/PasteHandler.tsx

@@ -24,7 +24,7 @@ import parseCollectionSlug from "@shared/utils/parseCollectionSlug";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isCollectionUrl, isDocumentUrl, isUrl } from "@shared/utils/urls";
 import stores from "~/stores";
-import PasteMenu from "../components/PasteMenu";
+import { PasteMenu } from "../components/PasteMenu";
 
 export default class PasteHandler extends Extension {
   state: {
@@ -415,6 +415,21 @@ export default class PasteHandler extends Extension {
     });
   };
 
+  private insertMention = () => {
+    const { view } = this.editor;
+    const { state } = view;
+    const result = this.findPlaceholder(state, this.state.pastedText);
+
+    // Remove just the placeholder here.
+    // Mention node will be created by SuggestionsMenu.
+    if (result) {
+      const tr = state.tr.deleteRange(result[0], result[1]);
+      view.dispatch(
+        tr.setSelection(TextSelection.near(tr.doc.resolve(result[0])))
+      );
+    }
+  };
+
   private removePlaceholder = () => {
     const { view } = this.editor;
     const { state } = view;
@@ -450,6 +465,11 @@ export default class PasteHandler extends Extension {
         this.insertEmbed();
         break;
       }
+      case "mention": {
+        this.hidePasteMenu();
+        this.insertMention();
+        break;
+      }
       default:
         break;
     }

app/editor/extensions/index.ts

@@ -3,6 +3,7 @@ import Mark from "@shared/editor/marks/Mark";
 import Node from "@shared/editor/nodes/Node";
 import BlockMenuExtension from "~/editor/extensions/BlockMenu";
 import ClipboardTextSerializer from "~/editor/extensions/ClipboardTextSerializer";
+import CreateIssueExtension from "~/editor/extensions/CreateIssue";
 import EmojiMenuExtension from "~/editor/extensions/EmojiMenu";
 import FindAndReplaceExtension from "~/editor/extensions/FindAndReplace";
 import HoverPreviewsExtension from "~/editor/extensions/HoverPreviews";
@@ -24,6 +25,7 @@ export const withUIExtensions = (nodes: Nodes) => [
   MentionMenuExtension,
   FindAndReplaceExtension,
   HoverPreviewsExtension,
+  CreateIssueExtension,
   // Order these default key handlers last
   PreventTab,
   Keys,

app/editor/hooks/useRecentIssueSources.ts

@@ -0,0 +1,47 @@
+import { IssueSource } from "@shared/schema";
+import Storage from "@shared/utils/Storage";
+import React from "react";
+import usePersistedState, {
+  setPersistedState,
+} from "~/hooks/usePersistedState";
+
+const StorageKey = "recent-issue-sources";
+const MaxCount = 5;
+
+export function useRecentIssueSources() {
+  const [issueSources, setIssueSources] = usePersistedState<IssueSource[]>(
+    StorageKey,
+    [] as IssueSource[]
+  );
+
+  const addIssueSource = React.useCallback(
+    (source: IssueSource) => {
+      const newIssueSources = insertAndTrim(issueSources, source);
+      setIssueSources(newIssueSources);
+    },
+    [issueSources, setIssueSources]
+  );
+
+  return { issueSources, addIssueSource };
+}
+
+export function addRecentIssueSource(source: IssueSource) {
+  const issueSources: IssueSource[] = Storage.get(StorageKey) ?? [];
+  const newIssueSources = insertAndTrim(issueSources, source);
+  setPersistedState(StorageKey, newIssueSources);
+}
+
+function insertAndTrim(issueSources: IssueSource[], source: IssueSource) {
+  const newIssueSources = issueSources.filter((s) => s.id !== source.id);
+  newIssueSources.unshift(source);
+
+  if (newIssueSources.length > MaxCount) {
+    newIssueSources.pop();
+  }
+
+  return newIssueSources;
+}
+
+export type RecentIssueSourcesResponse = ReturnType<
+  typeof useRecentIssueSources
+>;

app/editor/menus/formatting.tsx

@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import {
   BoldIcon,
   CodeIcon,
@@ -17,8 +18,9 @@ import {
   IndentIcon,
   CopyIcon,
   Heading3Icon,
+  PlusIcon,
 } from "outline-icons";
-import { EditorState } from "prosemirror-state";
+import { EditorState, TextSelection } from "prosemirror-state";
 import * as React from "react";
 import styled from "styled-components";
 import Highlight from "@shared/editor/marks/Highlight";
@@ -28,14 +30,17 @@ 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 { IssueSource } from "@shared/schema";
 import { metaDisplay } from "@shared/utils/keyboard";
 import CircleIcon from "~/components/Icons/CircleIcon";
+import PluginIcon from "~/components/PluginIcon";
 import { Dictionary } from "~/hooks/useDictionary";
 
 export default function formattingMenuItems(
   state: EditorState,
   isTemplate: boolean,
   isMobile: boolean,
+  recentIssueSources: IssueSource[],
   dictionary: Dictionary
 ): MenuItem[] {
   const { schema } = state;
@@ -43,12 +48,39 @@ export default function formattingMenuItems(
   const isCodeBlock = isInCode(state, { onlyBlock: true });
   const isEmpty = state.selection.empty;
 
+  const selectedText =
+    !isEmpty && state.selection instanceof TextSelection
+      ? state.doc.cut(state.selection.from, state.selection.to).textContent
+      : undefined;
+
   const highlight = getMarksBetween(
     state.selection.from,
     state.selection.to,
     state
   ).find(({ mark }) => mark.type.name === "highlight");
 
+  const issueSourcesChildren = recentIssueSources.length
+    ? recentIssueSources.map<MenuItem>((source) => ({
+        name: "issue",
+        label: `${source.owner.name}/${source.name}`,
+        icon: <PluginIcon id={source.service} />,
+        attrs: {
+          title: selectedText,
+          source: JSON.stringify(source),
+        },
+      }))
+    : undefined;
+
+  if (issueSourcesChildren) {
+    issueSourcesChildren.push({
+      name: "issue",
+      label: `${t("Other")}…`,
+      attrs: {
+        title: selectedText,
+      },
+    });
+  }
+
   return [
     {
       name: "placeholder",
@@ -259,6 +291,21 @@ export default function formattingMenuItems(
       shortcut: `${metaDisplay}+C`,
       visible: isCode && !isCodeBlock && (!isMobile || !isEmpty),
     },
+    {
+      name: "separator",
+      visible: !isCode && !isEmpty,
+    },
+    {
+      name: "issue",
+      tooltip: dictionary.createIssue,
+      shortcut: `${metaDisplay}+⌥+I`,
+      icon: <PlusIcon />,
+      attrs: {
+        title: selectedText,
+      },
+      visible: !isCode && !!selectedText,
+      children: issueSourcesChildren,
+    },
   ];
 }
 

app/hooks/useDictionary.ts

@@ -27,6 +27,7 @@ export default function useDictionary() {
       codeInline: t("Code"),
       comment: t("Comment"),
       copy: t("Copy"),
+      createIssue: t("Create issue from selection"),
       createLink: t("Create link"),
       createLinkError: t("Sorry, an error occurred creating the link"),
       createNewDoc: t("Create a new doc"),

app/hooks/useIsMounted.ts

@@ -1,19 +1,3 @@
-import * as React from "react";
+import useIsMounted from "@shared/hooks/useIsMounted";
 
-/**
- * Hook to check if component is still mounted
- *
- * @returns {boolean} true if the component is mounted, false otherwise
- */
-export default function useIsMounted() {
-  const isMounted = React.useRef(false);
-
-  React.useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
-  return React.useCallback(() => isMounted.current, []);
-}
+export default useIsMounted;

app/models/Integration.ts

@@ -1,8 +1,8 @@
 import { observable } from "mobx";
-import type {
+import {
   IntegrationService,
-  IntegrationSettings,
-  IntegrationType,
+  type IntegrationSettings,
+  type IntegrationType,
 } from "@shared/types";
 import User from "~/models/User";
 import Model from "~/models/base/Model";

app/scenes/Settings/components/FileOperationListItem.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useTheme } from "styled-components";
+import Spinner from "@shared/components/Spinner";
 import {
   FileOperationFormat,
   FileOperationState,
@@ -13,7 +14,6 @@ import FileOperation from "~/models/FileOperation";
 import { Action } from "~/components/Actions";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import ListItem from "~/components/List/Item";
-import Spinner from "~/components/Spinner";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

app/scenes/Settings/components/ImportListItem.tsx

@@ -5,12 +5,12 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useTheme } from "styled-components";
+import Spinner from "@shared/components/Spinner";
 import { ImportState } from "@shared/types";
 import Import from "~/models/Import";
 import { Action } from "~/components/Actions";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import ListItem from "~/components/List/Item";
-import Spinner from "~/components/Spinner";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

app/utils/mention.ts

@@ -0,0 +1,58 @@
+import {
+  IntegrationService,
+  IntegrationSettings,
+  IntegrationType,
+  MentionType,
+} from "@shared/types";
+import Integration from "~/models/Integration";
+
+export const isURLMentionable = ({
+  url,
+  integration,
+}: {
+  url: URL;
+  integration: Integration;
+}): boolean => {
+  const { hostname, pathname } = url;
+  const pathParts = pathname.split("/");
+
+  switch (integration.service) {
+    case IntegrationService.GitHub: {
+      const settings =
+        integration.settings as IntegrationSettings<IntegrationType.Embed>;
+
+      return (
+        hostname === "github.com" &&
+        settings.github?.installation.account.name === pathParts[1] // ensure installed org/account name matches with the provided url.
+      );
+    }
+
+    default:
+      return false;
+  }
+};
+
+export const determineMentionType = ({
+  url,
+  integration,
+}: {
+  url: URL;
+  integration: Integration;
+}): MentionType | undefined => {
+  const { pathname } = url;
+  const pathParts = pathname.split("/");
+
+  switch (integration.service) {
+    case IntegrationService.GitHub: {
+      const type = pathParts[3];
+      return type === "pull"
+        ? MentionType.PullRequest
+        : type === "issues"
+        ? MentionType.Issue
+        : undefined;
+    }
+
+    default:
+      return;
+  }
+};

plugins/github/client/index.tsx

@@ -13,4 +13,9 @@ PluginManager.add([
       component: React.lazy(() => import("./Settings")),
     },
   },
+  {
+    ...config,
+    type: Hook.Icon,
+    value: Icon,
+  },
 ]);

plugins/github/server/GitHubIssueProvider.ts

@@ -0,0 +1,81 @@
+import { Endpoints } from "@octokit/types";
+import Logger from "@server/logging/Logger";
+import { Integration, User } from "@server/models";
+import { CreateIssueResponse } from "@server/types";
+import { BaseIssueProvider } from "@server/utils/IssueProvider";
+import { IssueSource } from "@shared/schema";
+import {
+  IntegrationService,
+  IntegrationType,
+  UnfurlResourceType,
+} from "@shared/types";
+import { GitHub } from "./github";
+
+// This is needed to account for Octokit paginate response type mismatch.
+type ReposForInstallation =
+  Endpoints["GET /installation/repositories"]["response"]["data"]["repositories"];
+
+export class GitHubIssueProvider extends BaseIssueProvider {
+  constructor() {
+    super(IntegrationService.GitHub);
+  }
+
+  async fetchSources(
+    integration: Integration<IntegrationType.Embed>
+  ): Promise<IssueSource[]> {
+    const client = await GitHub.authenticateAsInstallation(
+      integration.settings.github!.installation.id
+    );
+
+    const repos =
+      (await client.requestRepos()) as unknown as ReposForInstallation;
+
+    const sources = repos.map<IssueSource>((repo) => ({
+      id: String(repo.id),
+      name: repo.name,
+      owner: { id: String(repo.owner.id), name: repo.owner.login },
+      service: IntegrationService.GitHub,
+    }));
+
+    return sources;
+  }
+
+  async createIssue(
+    title: string,
+    source: IssueSource,
+    actor: User
+  ): Promise<CreateIssueResponse | undefined> {
+    const integration = (await Integration.findOne({
+      where: {
+        service: IntegrationService.GitHub,
+        teamId: actor.teamId,
+        "settings.github.installation.account.name": source.owner.name,
+      },
+    })) as Integration<IntegrationType.Embed> | undefined;
+
+    if (!integration) {
+      return;
+    }
+
+    try {
+      const client = await GitHub.authenticateAsInstallation(
+        integration.settings.github!.installation.id
+      );
+
+      const { data } = await client.createIssue({
+        owner: source.owner.name,
+        repo: source.name,
+        title,
+      });
+
+      return {
+        ...data,
+        type: UnfurlResourceType.Issue,
+        cacheKey: data.html_url,
+      };
+    } catch (err) {
+      Logger.warn("Failed to create issue in GitHub", err);
+      return;
+    }
+  }
+}

plugins/github/server/api/github.ts

@@ -2,6 +2,7 @@ import Router from "koa-router";
 import find from "lodash/find";
 import { IntegrationService, IntegrationType } from "@shared/types";
 import { parseDomain } from "@shared/utils/domains";
+import { createContext } from "@server/context";
 import Logger from "@server/logging/Logger";
 import auth from "@server/middlewares/authentication";
 import { transaction } from "@server/middlewares/transaction";
@@ -88,30 +89,27 @@ router.get(
       },
       { transaction }
     );
-    await Integration.create(
-      {
-        service: IntegrationService.GitHub,
-        type: IntegrationType.Embed,
-        userId: user.id,
-        teamId: user.teamId,
-        authenticationId: authentication.id,
-        settings: {
-          github: {
-            installation: {
-              id: installationId!,
-              account: {
-                id: installation.account?.id,
-                name:
-                  // @ts-expect-error Property 'login' does not exist on type
-                  installation.account?.login,
-                avatarUrl: installation.account?.avatar_url,
-              },
+    await Integration.createWithCtx(createContext({ user, transaction }), {
+      service: IntegrationService.GitHub,
+      type: IntegrationType.Embed,
+      userId: user.id,
+      teamId: user.teamId,
+      authenticationId: authentication.id,
+      settings: {
+        github: {
+          installation: {
+            id: installationId!,
+            account: {
+              id: installation.account?.id,
+              name:
+                // @ts-expect-error Property 'login' does not exist on type
+                installation.account?.login,
+              avatarUrl: installation.account?.avatar_url,
             },
           },
         },
       },
-      { transaction }
-    );
+    });
     ctx.redirect(GitHubUtils.url);
   }
 );

plugins/github/server/github.ts

@@ -40,6 +40,32 @@ const requestPlugin = (octokit: Octokit) => ({
       },
     }),
 
+  requestRepos: () =>
+    octokit.paginate(octokit.rest.apps.listReposAccessibleToInstallation, {
+      headers: {
+        Accept: "application/vnd.github+json",
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+    }),
+
+  createIssue: async ({
+    owner,
+    repo,
+    title,
+  }: {
+    owner: string;
+    repo: string;
+    title: string;
+  }) =>
+    octokit.request(`POST /repos/{owner}/{repo}/issues`, {
+      owner,
+      repo,
+      title,
+      headers: {
+        Accept: "application/vnd.github.text+json",
+        "X-GitHub-Api-Version": "2022-11-28",
+      },
+    }),
   /**
    * Fetches app installations accessible to the user
    *

plugins/github/server/index.ts

@@ -1,6 +1,8 @@
+import { IntegrationService } from "@shared/types";
 import { Minute } from "@shared/utils/time";
 import { PluginManager, Hook } from "@server/utils/PluginManager";
 import config from "../plugin.json";
+import { GitHubIssueProvider } from "./GitHubIssueProvider";
 import router from "./api/github";
 import env from "./env";
 import { GitHub } from "./github";
@@ -24,6 +26,10 @@ if (enabled) {
       type: Hook.UnfurlProvider,
       value: { unfurl: GitHub.unfurl, cacheExpiry: Minute.seconds },
     },
+    {
+      type: Hook.IssueProvider,
+      value: new GitHubIssueProvider(),
+    },
     {
       type: Hook.Uninstall,
       value: uninstall,

server/migrations/20250408192616-add-issueSources-to-integrations.js

@@ -0,0 +1,15 @@
+"use strict";
+
+/** @type {import('sequelize-cli').Migration} */
+module.exports = {
+  async up(queryInterface, Sequelize) {
+    queryInterface.addColumn("integrations", "issueSources", {
+      type: Sequelize.JSONB,
+      allowNull: true,
+    });
+  },
+
+  async down(queryInterface, Sequelize) {
+    queryInterface.removeColumn("integrations", "issueSources");
+  },
+};

server/models/Integration.ts

@@ -13,6 +13,7 @@ import {
   IsIn,
   AfterDestroy,
 } from "sequelize-typescript";
+import { IssueSource } from "@shared/schema";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import type { IntegrationSettings } from "@shared/types";
 import Collection from "@server/models/Collection";
@@ -53,6 +54,9 @@ class Integration<T = unknown> extends ParanoidModel<
   @Column(DataType.ARRAY(DataType.STRING))
   events: string[];
 
+  @Column(DataType.JSONB)
+  issueSources: IssueSource[] | null;
+
   // associations
 
   @BelongsTo(() => User, "userId")

server/models/helpers/ProsemirrorHelper.tsx

@@ -1,7 +1,7 @@
 import { JSDOM } from "jsdom";
 import compact from "lodash/compact";
 import flatten from "lodash/flatten";
-import isEqual from "lodash/isEqual";
+import isMatch from "lodash/isMatch";
 import uniq from "lodash/uniq";
 import { Node, DOMSerializer, Fragment } from "prosemirror-model";
 import * as React from "react";
@@ -12,7 +12,7 @@ import * as Y from "yjs";
 import EditorContainer from "@shared/editor/components/Styles";
 import GlobalStyles from "@shared/styles/globals";
 import light from "@shared/styles/theme";
-import { MentionType, ProsemirrorData } from "@shared/types";
+import { MentionType, ProsemirrorData, UnfurlResponse } from "@shared/types";
 import { attachmentRedirectRegex } from "@shared/utils/ProsemirrorHelper";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isRTL } from "@shared/utils/rtl";
@@ -42,6 +42,8 @@ export type MentionAttrs = {
   modelId: string;
   actorId: string | undefined;
   id: string;
+  href?: string;
+  unfurl?: UnfurlResponse[keyof UnfurlResponse];
 };
 
 @trace()
@@ -194,7 +196,7 @@ export class ProsemirrorHelper {
       node.descendants((childNode: Node) => {
         if (
           childNode.type.name === "mention" &&
-          isEqual(childNode.attrs, mention)
+          isMatch(childNode.attrs, mention)
         ) {
           foundMention = true;
           return false;

server/queues/processors/IntegrationCreatedProcessor.ts

@@ -3,6 +3,7 @@ import { Integration } from "@server/models";
 import BaseProcessor from "@server/queues/processors/BaseProcessor";
 import { IntegrationEvent, Event } from "@server/types";
 import { CacheHelper } from "@server/utils/CacheHelper";
+import CacheIssueSourcesTask from "../tasks/CacheIssueSourcesTask";
 
 export default class IntegrationCreatedProcessor extends BaseProcessor {
   static applicableEvents: Event["name"][] = ["integrations.create"];
@@ -18,6 +19,11 @@ export default class IntegrationCreatedProcessor extends BaseProcessor {
       return;
     }
 
+    // Store the available issue sources in the integration record.
+    await CacheIssueSourcesTask.schedule({
+      integrationId: integration.id,
+    });
+
     // Clear the cache of unfurled data for the team as it may be stale now.
     await CacheHelper.clearData(CacheHelper.getUnfurlKey(integration.teamId));
   }

server/queues/tasks/CacheIssueSourcesTask.ts

@@ -0,0 +1,35 @@
+import { Integration } from "@server/models";
+import { sequelize } from "@server/storage/database";
+import { Hook, PluginManager } from "@server/utils/PluginManager";
+import BaseTask from "./BaseTask";
+
+const plugins = PluginManager.getHooks(Hook.IssueProvider);
+
+type Props = {
+  integrationId: string;
+};
+
+export default class CacheIssueSourcesTask extends BaseTask<Props> {
+  async perform({ integrationId }: Props) {
+    await sequelize.transaction(async (transaction) => {
+      const integration = await Integration.findByPk(integrationId, {
+        transaction,
+        lock: transaction.LOCK.UPDATE,
+      });
+      if (!integration) {
+        return;
+      }
+
+      const plugin = plugins.find(
+        (p) => p.value.service === integration.service
+      );
+      if (!plugin) {
+        return;
+      }
+
+      const sources = await plugin.value.fetchSources(integration);
+      integration.issueSources = sources;
+      await integration.save({ transaction });
+    });
+  }
+}

server/routes/api/index.ts

@@ -23,6 +23,7 @@ import groups from "./groups";
 import imports from "./imports";
 import installation from "./installation";
 import integrations from "./integrations";
+import issues from "./issues";
 import apiErrorHandler from "./middlewares/apiErrorHandler";
 import apiResponse from "./middlewares/apiResponse";
 import apiTracer from "./middlewares/apiTracer";
@@ -99,6 +100,7 @@ router.use("/", urls.routes());
 router.use("/", userMemberships.routes());
 router.use("/", reactions.routes());
 router.use("/", imports.routes());
+router.use("/", issues.routes());
 
 if (!env.isCloudHosted) {
   router.use("/", installation.routes());

server/routes/api/issues/index.ts

@@ -0,0 +1 @@
+export { default } from "./issues";

server/routes/api/issues/issues.ts

@@ -0,0 +1,70 @@
+import { InternalError, InvalidRequestError } from "@server/errors";
+import auth from "@server/middlewares/authentication";
+import validate from "@server/middlewares/validate";
+import { Integration } from "@server/models";
+import presentUnfurl from "@server/presenters/unfurl";
+import { APIContext } from "@server/types";
+import { CacheHelper } from "@server/utils/CacheHelper";
+import { Hook, PluginManager } from "@server/utils/PluginManager";
+import { IssueSource } from "@shared/schema";
+import { UserRole } from "@shared/types";
+import Router from "koa-router";
+import * as T from "./schema";
+
+const router = new Router();
+const plugins = PluginManager.getHooks(Hook.IssueProvider);
+
+router.post(
+  "issues.list_sources",
+  auth({ role: UserRole.Member }),
+  async (ctx: APIContext) => {
+    const { user } = ctx.state.auth;
+
+    const integrations = await Integration.findAll({
+      attributes: ["issueSources"],
+      where: { teamId: user.teamId },
+    });
+
+    const sources = integrations
+      .flatMap((integration) => integration.issueSources)
+      .filter(Boolean) as IssueSource[];
+
+    ctx.body = {
+      data: sources,
+    };
+  }
+);
+
+router.post(
+  "issues.create",
+  auth({ role: UserRole.Member }),
+  validate(T.IssuesCreateSchema),
+  async (ctx: APIContext<T.IssuesCreateReq>) => {
+    const { title, source } = ctx.input.body;
+    const { user } = ctx.state.auth;
+
+    const plugin = plugins.find((p) => p.value.service === source.service);
+
+    if (!plugin) {
+      throw InvalidRequestError();
+    }
+
+    const issue = await plugin.value.createIssue(title, source, user);
+
+    if (!issue) {
+      throw InternalError();
+    }
+
+    await CacheHelper.setData(
+      CacheHelper.getUnfurlKey(user.teamId, issue.cacheKey),
+      issue,
+      plugin.value.cacheExpiry
+    );
+
+    ctx.body = {
+      data: await presentUnfurl(issue),
+    };
+  }
+);
+
+export default router;

server/routes/api/issues/schema.ts

@@ -0,0 +1,12 @@
+import { IssueSource } from "@shared/schema";
+import { z } from "zod";
+import { BaseSchema } from "../schema";
+
+export const IssuesCreateSchema = BaseSchema.extend({
+  body: z.object({
+    title: z.string().nonempty(),
+    source: IssueSource,
+  }),
+});
+
+export type IssuesCreateReq = z.infer<typeof IssuesCreateSchema>;

server/types.ts

@@ -2,6 +2,7 @@ import { ParameterizedContext, DefaultContext } from "koa";
 import { IRouterParamContext } from "koa-router";
 import { InferAttributes, Model, Transaction } from "sequelize";
 import { z } from "zod";
+import { IssueSource } from "@shared/schema";
 import {
   CollectionSort,
   NavigationNode,
@@ -10,6 +11,7 @@ import {
   JSONValue,
   UnfurlResourceType,
   ProsemirrorData,
+  IntegrationType,
 } from "@shared/types";
 import { BaseSchema } from "@server/routes/api/schema";
 import { AccountProvisionerResult } from "./commands/accountProvisioner";
@@ -585,6 +587,19 @@ export type UnfurlSignature = (
 
 export type UninstallSignature = (integration: Integration) => Promise<void>;
 
+export type CreateIssueResponse = Unfurl & { cacheKey: string };
+
+export type IssueProvider = {
+  listSources: (
+    integration: Integration<IntegrationType.Embed>
+  ) => Promise<IssueSource[]>;
+  createIssue: (
+    title: string,
+    source: IssueSource,
+    actor: User
+  ) => Promise<CreateIssueResponse | undefined>;
+};
+
 export type Replace<T, K extends keyof T, N extends string> = {
   [P in keyof T as P extends K ? N : P]: T[P extends K ? K : P];
 };

server/utils/IssueProvider.ts

@@ -0,0 +1,28 @@
+import { Integration, User } from "@server/models";
+import { CreateIssueResponse } from "@server/types";
+import { IssueSource } from "@shared/schema";
+import {
+  IntegrationType,
+  IssueProviderIntegrationService,
+} from "@shared/types";
+import { Minute } from "@shared/utils/time";
+
+export abstract class BaseIssueProvider {
+  service: IssueProviderIntegrationService;
+  cacheExpiry: number;
+
+  constructor(service: IssueProviderIntegrationService, cacheExpiry?: number) {
+    this.service = service;
+    this.cacheExpiry = cacheExpiry ?? Minute.seconds;
+  }
+
+  abstract fetchSources(
+    integration: Integration<IntegrationType.Embed>
+  ): Promise<IssueSource[]>;
+
+  abstract createIssue(
+    title: string,
+    source: IssueSource,
+    actor: User
+  ): Promise<CreateIssueResponse | undefined>;
+}

server/utils/PluginManager.ts

@@ -9,6 +9,7 @@ import Logger from "@server/logging/Logger";
 import type BaseProcessor from "@server/queues/processors/BaseProcessor";
 import type BaseTask from "@server/queues/tasks/BaseTask";
 import { UnfurlSignature, UninstallSignature } from "@server/types";
+import { BaseIssueProvider } from "./IssueProvider";
 
 export enum PluginPriority {
   VeryHigh = 0,
@@ -25,6 +26,7 @@ export enum Hook {
   API = "api",
   AuthProvider = "authProvider",
   EmailTemplate = "emailTemplate",
+  IssueProvider = "issueProvider",
   Processor = "processor",
   Task = "task",
   UnfurlProvider = "unfurl",
@@ -39,6 +41,7 @@ type PluginValueMap = {
   [Hook.API]: Router;
   [Hook.AuthProvider]: { router: Router; id: string };
   [Hook.EmailTemplate]: typeof BaseEmail;
+  [Hook.IssueProvider]: BaseIssueProvider;
   [Hook.Processor]: typeof BaseProcessor;
   [Hook.Task]: typeof BaseTask<any>;
   [Hook.Uninstall]: UninstallSignature;

shared/components/Text.tsx

@@ -0,0 +1,73 @@
+import styled, { css } from "styled-components";
+import { ellipsis } from "../styles";
+
+type Props = {
+  /** The type of text to render */
+  type?: "secondary" | "tertiary" | "danger";
+  /** The size of the text */
+  size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+  /** The direction of the text (defaults to ltr) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the text should be selectable (defaults to false) */
+  selectable?: boolean;
+  /** The font weight of the text */
+  weight?: "xbold" | "bold" | "normal";
+  /** Whether the text should be italic */
+  italic?: boolean;
+  /** Whether the text should be truncated with an ellipsis */
+  ellipsis?: boolean;
+  /** Whether the text should be monospaced */
+  monospace?: boolean;
+};
+
+/**
+ * Use this component for all interface text that should not be selectable
+ * by the user, this is the majority of UI text explainers, notes, headings.
+ */
+const Text = styled.span<Props>`
+  margin-top: 0;
+  text-align: ${(props) => (props.dir ? props.dir : "inherit")};
+  color: ${(props) =>
+    props.type === "secondary"
+      ? props.theme.textSecondary
+      : props.type === "tertiary"
+      ? props.theme.textTertiary
+      : props.type === "danger"
+      ? props.theme.brand.red
+      : props.theme.text};
+  font-size: ${(props) =>
+    props.size === "xlarge"
+      ? "26px"
+      : props.size === "large"
+      ? "18px"
+      : props.size === "medium"
+      ? "16px"
+      : props.size === "small"
+      ? "14px"
+      : props.size === "xsmall"
+      ? "13px"
+      : "inherit"};
+
+  ${(props) =>
+    props.weight &&
+    css`
+      font-weight: ${props.weight === "xbold"
+        ? 600
+        : props.weight === "bold"
+        ? 500
+        : props.weight === "normal"
+        ? 400
+        : "inherit"};
+    `}
+
+  font-style: ${(props) => (props.italic ? "italic" : "normal")};
+  font-family: ${(props) =>
+    props.monospace ? props.theme.fontFamilyMono : "inherit"};
+
+  white-space: normal;
+  user-select: ${(props) => (props.selectable ? "text" : "none")};
+
+  ${(props) => props.ellipsis && ellipsis()}
+`;
+
+export default Text;

shared/editor/components/Mentions.tsx

@@ -1,17 +1,49 @@
 import { observer } from "mobx-react";
-import { DocumentIcon, EmailIcon, CollectionIcon } from "outline-icons";
+import {
+  DocumentIcon,
+  EmailIcon,
+  CollectionIcon,
+  WarningIcon,
+} from "outline-icons";
 import { Node } from "prosemirror-model";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import styled from "styled-components";
+import Flex from "../../components/Flex";
 import Icon from "../../components/Icon";
+import { IssueStatusIcon } from "../../components/IssueStatusIcon";
+import { PullRequestIcon } from "../../components/PullRequestIcon";
+import Spinner from "../../components/Spinner";
+import Text from "../../components/Text";
+import useIsMounted from "../../hooks/useIsMounted";
 import useStores from "../../hooks/useStores";
+import theme from "../../styles/theme";
+import type {
+  JSONValue,
+  UnfurlResourceType,
+  UnfurlResponse,
+} from "../../types";
 import { cn } from "../styles/utils";
 import { ComponentProps } from "../types";
 
-const getAttributesFromNode = (node: Node) => {
-  const spec = node.type.spec.toDOM?.(node) as any as Record<string, string>[];
-  const { class: className, ...attrs } = spec[1];
-  return { className, ...attrs };
+type Attrs = {
+  className: string;
+  unfurl?: UnfurlResponse[keyof UnfurlResponse];
+} & Record<string, JSONValue>;
+
+const getAttributesFromNode = (node: Node): Attrs => {
+  const spec = node.type.spec.toDOM?.(node) as any as Record<
+    string,
+    JSONValue
+  >[];
+  const { class: className, "data-unfurl": unfurl, ...attrs } = spec[1];
+
+  return {
+    className: className as Attrs["className"],
+    unfurl: unfurl ? (JSON.parse(unfurl as any) as Attrs["unfurl"]) : undefined,
+    ...attrs,
+  };
 };
 
 export const MentionUser = observer(function MentionUser_(
@@ -20,7 +52,7 @@ export const MentionUser = observer(function MentionUser_(
   const { isSelected, node } = props;
   const { users } = useStores();
   const user = users.get(node.attrs.modelId);
-  const { className, ...attrs } = getAttributesFromNode(node);
+  const { className, unfurl, ...attrs } = getAttributesFromNode(node);
 
   return (
     <span
@@ -42,7 +74,7 @@ export const MentionDocument = observer(function MentionDocument_(
   const { documents } = useStores();
   const doc = documents.get(node.attrs.modelId);
   const modelId = node.attrs.modelId;
-  const { className, ...attrs } = getAttributesFromNode(node);
+  const { className, unfurl, ...attrs } = getAttributesFromNode(node);
 
   React.useEffect(() => {
     if (modelId) {
@@ -75,7 +107,7 @@ export const MentionCollection = observer(function MentionCollection_(
   const { collections } = useStores();
   const collection = collections.get(node.attrs.modelId);
   const modelId = node.attrs.modelId;
-  const { className, ...attrs } = getAttributesFromNode(node);
+  const { className, unfurl, ...attrs } = getAttributesFromNode(node);
 
   React.useEffect(() => {
     if (modelId) {
@@ -100,3 +132,185 @@ export const MentionCollection = observer(function MentionCollection_(
     </Link>
   );
 });
+
+type IssuePrProps = ComponentProps & {
+  onChangeUnfurl: (
+    unfurl:
+      | UnfurlResponse[UnfurlResourceType.Issue]
+      | UnfurlResponse[UnfurlResourceType.PR]
+  ) => void;
+};
+
+export const MentionIssue = observer((props: IssuePrProps) => {
+  const { unfurls } = useStores();
+  const isMounted = useIsMounted();
+  const [loaded, setLoaded] = React.useState(false);
+  const onChangeUnfurl = React.useRef(props.onChangeUnfurl).current; // stable reference to callback function.
+
+  const { isSelected, node } = props;
+  const {
+    className,
+    unfurl: unfurlAttr,
+    ...attrs
+  } = getAttributesFromNode(node);
+
+  const unfurl = unfurls.get(attrs.href)?.data ?? unfurlAttr;
+
+  React.useEffect(() => {
+    const fetchIssue = async () => {
+      const unfurlModel = await unfurls.fetchUnfurl({ url: attrs.href });
+
+      if (!isMounted()) {
+        return;
+      }
+
+      if (unfurlModel) {
+        onChangeUnfurl({
+          ...unfurlModel.data,
+          description: null,
+        } satisfies UnfurlResponse[UnfurlResourceType.Issue]);
+      }
+
+      setLoaded(true);
+    };
+
+    void fetchIssue();
+  }, [unfurls, attrs.href, isMounted, onChangeUnfurl]);
+
+  if (!unfurl) {
+    return !loaded ? (
+      <MentionLoading className={className} />
+    ) : (
+      <MentionError className={className} />
+    );
+  }
+
+  const issue = unfurl as UnfurlResponse[UnfurlResourceType.Issue];
+
+  return (
+    <a
+      {...attrs}
+      className={cn(className, {
+        "ProseMirror-selectednode": isSelected,
+      })}
+      href={attrs.href as string}
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      <Flex align="center" gap={6}>
+        <IssueStatusIcon
+          size={14}
+          status={issue.state.name}
+          color={issue.state.color}
+        />
+        <Flex align="center" gap={4}>
+          <Text>{issue.title}</Text>
+          <Text type="tertiary">{issue.id}</Text>
+        </Flex>
+      </Flex>
+    </a>
+  );
+});
+
+export const MentionPullRequest = observer((props: IssuePrProps) => {
+  const { unfurls } = useStores();
+  const isMounted = useIsMounted();
+  const [loaded, setLoaded] = React.useState(false);
+  const onChangeUnfurl = React.useRef(props.onChangeUnfurl).current; // stable reference to callback function.
+
+  const { isSelected, node } = props;
+  const {
+    className,
+    unfurl: unfurlAttr,
+    ...attrs
+  } = getAttributesFromNode(node);
+
+  const unfurl = unfurls.get(attrs.href)?.data ?? unfurlAttr;
+
+  React.useEffect(() => {
+    const fetchPR = async () => {
+      const unfurlModel = await unfurls.fetchUnfurl({ url: attrs.href });
+
+      if (!isMounted()) {
+        return;
+      }
+
+      if (unfurlModel) {
+        onChangeUnfurl({
+          ...unfurlModel.data,
+          description: null,
+        } satisfies UnfurlResponse[UnfurlResourceType.PR]);
+      }
+
+      setLoaded(true);
+    };
+
+    void fetchPR();
+  }, [unfurls, attrs.href, isMounted, onChangeUnfurl]);
+
+  const sharedProps = {
+    className: cn(className, {
+      "ProseMirror-selectednode": isSelected,
+    }),
+  };
+
+  if (!unfurl) {
+    return !loaded ? (
+      <MentionLoading {...sharedProps} />
+    ) : (
+      <MentionError {...sharedProps} />
+    );
+  }
+
+  const pullRequest = unfurl as UnfurlResponse[UnfurlResourceType.PR];
+
+  return (
+    <a
+      {...attrs}
+      {...sharedProps}
+      href={attrs.href as string}
+      target="_blank"
+      rel="noopener noreferrer nofollow"
+    >
+      <Flex align="center" gap={6}>
+        <PullRequestIcon
+          size={14}
+          status={pullRequest.state.name}
+          color={pullRequest.state.color}
+        />
+        <Flex align="center" gap={4}>
+          <Text>{pullRequest.title}</Text>
+          <Text type="tertiary">{pullRequest.id}</Text>
+        </Flex>
+      </Flex>
+    </a>
+  );
+});
+
+export const MentionPlaceholder = () => <MentionLoading className="mention" />;
+
+const MentionLoading = ({ className }: { className: string }) => {
+  const { t } = useTranslation();
+
+  return (
+    <span className={className}>
+      <Spinner />
+      <Text type="tertiary">{`${t("Loading")}…`}</Text>
+    </span>
+  );
+};
+
+const MentionError = ({ className }: { className: string }) => {
+  const { t } = useTranslation();
+
+  return (
+    <span className={className}>
+      <StyledWarningIcon size={20} color={theme.danger} />
+      <Text type="secondary">{`${t("Error loading data")}`}</Text>
+    </span>
+  );
+};
+
+const StyledWarningIcon = styled(WarningIcon)`
+  margin: 0 -2px;
+`;

shared/editor/components/Styles.ts

@@ -1335,6 +1335,13 @@ mark {
   position: relative;
 }
 
+.code-block[data-language=none],
+.code-block[data-language=markdown] {
+  pre code {
+    color: ${props.theme.text};
+  }
+}
+
 .code-block[data-language=mermaidjs] {
   margin: 0.75em 0;
 

shared/editor/extensions/CodeHighlighting.ts

@@ -86,19 +86,6 @@ function getDecorations({
   blocks.forEach((block) => {
     let startPos = block.pos + 1;
     const language = getRefractorLangForLanguage(block.node.attrs.language);
-
-    if (!language) {
-      return;
-    }
-
-    // If the language isn't registered yet, trigger loading it
-    if (!refractor.registered(language)) {
-      languagesToImport.add(language);
-      return;
-    } else {
-      languagesToImport.delete(language);
-    }
-
     const lineDecorations = [];
 
     if (!cache[block.pos] || !cache[block.pos].node.eq(block.node)) {
@@ -127,35 +114,48 @@ function getDecorations({
         );
       }
 
-      const nodes = refractor.highlight(block.node.textContent, language);
-      const newDecorations = parseNodes(nodes)
-        .map((node: ParsedNode) => {
-          const from = startPos;
-          const to = from + node.text.length;
-
-          startPos = to;
-
-          return {
-            ...node,
-            from,
-            to,
-          };
-        })
-        .filter((node) => node.classes && node.classes.length)
-        .map((node) =>
-          Decoration.inline(node.from, node.to, {
-            class: node.classes.join(" "),
-          })
-        )
-        .concat(lineDecorations);
-
       cache[block.pos] = {
         node: block.node,
-        decorations: newDecorations,
+        decorations: lineDecorations,
       };
+
+      if (!language) {
+        // do nothing
+      } else if (refractor.registered(language)) {
+        languagesToImport.delete(language);
+
+        const nodes = refractor.highlight(block.node.textContent, language);
+        const newDecorations = parseNodes(nodes)
+          .map((node: ParsedNode) => {
+            const from = startPos;
+            const to = from + node.text.length;
+
+            startPos = to;
+
+            return {
+              ...node,
+              from,
+              to,
+            };
+          })
+          .filter((node) => node.classes && node.classes.length)
+          .map((node) =>
+            Decoration.inline(node.from, node.to, {
+              class: node.classes.join(" "),
+            })
+          )
+          .concat(lineDecorations);
+
+        cache[block.pos] = {
+          node: block.node,
+          decorations: newDecorations,
+        };
+      } else {
+        languagesToImport.add(language);
+      }
     }
 
-    cache[block.pos].decorations.forEach((decoration) => {
+    cache[block.pos]?.decorations.forEach((decoration) => {
       decorations.push(decoration);
     });
   });

shared/editor/nodes/Mention.tsx

@@ -1,3 +1,4 @@
+import isMatch from "lodash/isMatch";
 import { Token } from "markdown-it";
 import {
   NodeSpec,
@@ -15,10 +16,18 @@ import * as React from "react";
 import { Primitive } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import env from "../../env";
-import { MentionType } from "../../types";
+import {
+  MentionPlaceholder,
+  MentionType,
+  UnfurlResourceType,
+  UnfurlResponse,
+} from "../../types";
 import {
   MentionCollection,
   MentionDocument,
+  MentionIssue,
+  MentionPlaceholder as MentionPlaceholderComp,
+  MentionPullRequest,
   MentionUser,
 } from "../components/Mentions";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
@@ -50,6 +59,12 @@ export default class Mention extends Node {
         id: {
           default: undefined,
         },
+        href: {
+          default: undefined,
+        },
+        unfurl: {
+          default: undefined,
+        },
       },
       inline: true,
       marks: "",
@@ -73,6 +88,10 @@ export default class Mention extends Node {
               actorId: dom.dataset.actorid,
               label: dom.innerText,
               id: dom.id,
+              href: dom.getAttribute("href"),
+              unfurl: dom.dataset.unfurl
+                ? JSON.parse(dom.dataset.unfurl)
+                : undefined,
             };
           },
         },
@@ -87,11 +106,18 @@ export default class Mention extends Node {
               ? undefined
               : node.attrs.type === MentionType.Document
               ? `${env.URL}/doc/${node.attrs.modelId}`
-              : `${env.URL}/collection/${node.attrs.modelId}`,
+              : node.attrs.type === MentionType.Collection
+              ? `${env.URL}/collection/${node.attrs.modelId}`
+              : node.attrs.href,
           "data-type": node.attrs.type,
           "data-id": node.attrs.modelId,
           "data-actorid": node.attrs.actorId,
-          "data-url": `mention://${node.attrs.id}/${node.attrs.type}/${node.attrs.modelId}`,
+          "data-url":
+            node.attrs.type === MentionType.PullRequest ||
+            node.attrs.type === MentionType.Issue
+              ? node.attrs.href
+              : `mention://${node.attrs.id}/${node.attrs.type}/${node.attrs.modelId}`,
+          "data-unfurl": JSON.stringify(node.attrs.unfurl),
         },
         toPlainText(node),
       ],
@@ -107,6 +133,22 @@ export default class Mention extends Node {
         return <MentionDocument {...props} />;
       case MentionType.Collection:
         return <MentionCollection {...props} />;
+      case MentionType.Issue:
+        return (
+          <MentionIssue
+            {...props}
+            onChangeUnfurl={this.handleChangeUnfurl(props)}
+          />
+        );
+      case MentionType.PullRequest:
+        return (
+          <MentionPullRequest
+            {...props}
+            onChangeUnfurl={this.handleChangeUnfurl(props)}
+          />
+        );
+      case MentionPlaceholder:
+        return <MentionPlaceholderComp />;
       default:
         return null;
     }
@@ -149,29 +191,42 @@ export default class Mention extends Node {
   }
 
   keys(): Record<string, Command> {
+    const NavigableMention = [
+      MentionType.Collection,
+      MentionType.Document,
+      MentionType.Issue,
+      MentionType.PullRequest,
+    ];
+
     return {
       Enter: (state) => {
         const { selection } = state;
         if (
           selection instanceof NodeSelection &&
           selection.node.type.name === this.name &&
-          (selection.node.attrs.type === MentionType.Document ||
-            selection.node.attrs.type === MentionType.Collection)
+          NavigableMention.includes(selection.node.attrs.type)
         ) {
-          const { modelId } = selection.node.attrs;
+          const mentionType = selection.node.attrs.type;
 
-          const linkType =
-            selection.node.attrs.type === MentionType.Document
-              ? "doc"
-              : selection.node.attrs.type === MentionType.Collection
-              ? "collection"
-              : undefined;
+          let link: string;
 
-          if (!linkType) {
-            return false;
+          if (
+            mentionType === MentionType.Issue ||
+            mentionType === MentionType.PullRequest
+          ) {
+            link = selection.node.attrs.href;
+          } else {
+            const { modelId } = selection.node.attrs;
+
+            const linkType =
+              selection.node.attrs.type === MentionType.Document
+                ? "doc"
+                : "collection";
+
+            link = `/${linkType}/${modelId}`;
           }
 
-          this.editor.props.onClickLink?.(`/${linkType}/${modelId}`);
+          this.editor.props.onClickLink?.(link);
           return true;
         }
         return false;
@@ -218,4 +273,30 @@ export default class Mention extends Node {
       }),
     };
   }
+
+  handleChangeUnfurl =
+    ({ node, getPos }: { node: ProsemirrorNode; getPos: () => number }) =>
+    (unfurl: UnfurlResponse[keyof UnfurlResponse]) => {
+      const { view } = this.editor;
+      const { tr } = view.state;
+
+      const label =
+        unfurl.type === UnfurlResourceType.Issue ||
+        unfurl.type === UnfurlResourceType.PR
+          ? unfurl.title
+          : undefined;
+
+      const overrides: Record<string, unknown> = label ? { label } : {};
+      overrides.unfurl = unfurl;
+
+      const pos = getPos();
+
+      if (!isMatch(node.attrs, overrides)) {
+        const transaction = tr.setNodeMarkup(pos, undefined, {
+          ...node.attrs,
+          ...overrides,
+        });
+        view.dispatch(transaction);
+      }
+    };
 }

shared/hooks/useIsMounted.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+/**
+ * Hook to check if component is still mounted
+ *
+ * @returns {boolean} true if the component is mounted, false otherwise
+ */
+export default function useIsMounted() {
+  const isMounted = React.useRef(false);
+
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return React.useCallback(() => isMounted.current, []);
+}

shared/i18n/locales/en_US/translation.json

@@ -428,6 +428,7 @@
   "Create a new doc": "Create a new doc",
   "{{ userName }} won't be notified, as they do not have access to this document": "{{ userName }} won't be notified, as they do not have access to this document",
   "Keep as link": "Keep as link",
+  "Mention": "Mention",
   "Embed": "Embed",
   "Add column after": "Add column after",
   "Add column before": "Add column before",
@@ -1155,5 +1156,6 @@
   "You updated {{ timeAgo }}": "You updated {{ timeAgo }}",
   "{{ user }} updated {{ timeAgo }}": "{{ user }} updated {{ timeAgo }}",
   "You created {{ timeAgo }}": "You created {{ timeAgo }}",
-  "{{ user }} created {{ timeAgo }}": "{{ user }} created {{ timeAgo }}"
+  "{{ user }} created {{ timeAgo }}": "{{ user }} created {{ timeAgo }}",
+  "Error loading data": "Error loading data"
 }

shared/schema.ts

@@ -3,6 +3,7 @@ import {
   CollectionPermission,
   type ImportableIntegrationService,
   IntegrationService,
+  IssueProviderIntegrationService,
   ProsemirrorDoc,
 } from "./types";
 import { PageType } from "plugins/notion/shared/types";
@@ -57,3 +58,15 @@ export type ImportTaskOutput = {
   createdAt?: Date;
   updatedAt?: Date;
 }[];
+
+export const IssueSource = z.object({
+  id: z.string().nonempty(),
+  name: z.string().nonempty(),
+  owner: z.object({
+    id: z.string().nonempty(),
+    name: z.string().nonempty(),
+  }),
+  service: z.nativeEnum(IssueProviderIntegrationService),
+});
+
+export type IssueSource = z.infer<typeof IssueSource>;

shared/types.ts

@@ -75,8 +75,12 @@ export enum MentionType {
   User = "user",
   Document = "document",
   Collection = "collection",
+  Issue = "issue",
+  PullRequest = "pull_request",
 }
 
+export const MentionPlaceholder = "mention_placeholder";
+
 export type PublicEnv = {
   ROOT_SHARE_ID?: string;
   analytics: {
@@ -144,6 +148,15 @@ export const UserCreatableIntegrationService = {
   Umami: IntegrationService.Umami,
 } as const;
 
+export type IssueProviderIntegrationService = Extract<
+  IntegrationService,
+  IntegrationService.GitHub
+>;
+
+export const IssueProviderIntegrationService = {
+  Notion: IntegrationService.GitHub,
+} as const;
+
 export enum CollectionPermission {
   Read = "read",
   ReadWrite = "read_write",
@@ -416,7 +429,7 @@ export type UnfurlResponse = {
     /** Issue title */
     title: string;
     /** Issue description */
-    description: string;
+    description: string | null;
     /** Issue's author */
     author: { name: string; avatarUrl: string };
     /** Issue's labels */
@@ -436,7 +449,7 @@ export type UnfurlResponse = {
     /** Pull Request title */
     title: string;
     /** Pull Request description */
-    description: string;
+    description: string | null;
     /** Pull Request author */
     author: { name: string; avatarUrl: string };
     /** Pull Request status */