feat: Document hover cards (#1346)

* stash * refactor * refactor, styling * tweaks * pointer * styling * fi: Hide when printing * fix: No hover cards on shared links * remove suppressions no longer needed * fix: Don't show hover cards when editing, they get in the way * fix: Prevent hover card from going off rhs edge of screen * fix: Remount hover card when changing between links * fix: allow one part domains in links (#1350) * allow one part domains in links * no TLD when only one part domain * return null for parseDomain of empty string * fix fiddly hover preview behavior * WIP * refactor hover preview * fix: Non-rounded bottom corners * fix: Fixes an edgecase where mounting the nested editor in hovercard causesdocument to scroll if there is a hash in the url * fix: Incorrect document preview rendering * lint Co-authored-by: Nan Yu <thenanyu@gmail.com> Co-authored-by: Nan Yu <nan@getoutline.com>
2020-07-16 21:26:23 -07:00
parent d8603cc961
commit d5b5d4fc27
15 changed files with 374 additions and 18 deletions
--- a/app/components/Editor.js
+++ b/app/components/Editor.js
@@ -0,0 +1,115 @@
+// @flow
+import * as React from "react";
+import { withRouter, type RouterHistory } from "react-router-dom";
+import { observable } from "mobx";
+import { observer } from "mobx-react";
+import { lighten } from "polished";
+import styled, { withTheme } from "styled-components";
+import RichMarkdownEditor from "rich-markdown-editor";
+import { uploadFile } from "utils/uploadFile";
+import isInternalUrl from "utils/isInternalUrl";
+import Tooltip from "components/Tooltip";
+import UiStore from "stores/UiStore";
+import embeds from "../embeds";
+
+const EMPTY_ARRAY = [];
+
+type Props = {
+  id: string,
+  defaultValue?: string,
+  readOnly?: boolean,
+  grow?: boolean,
+  disableEmbeds?: boolean,
+  history: RouterHistory,
+  forwardedRef: React.Ref<RichMarkdownEditor>,
+  ui: UiStore,
+};
+
+@observer
+class Editor extends React.Component<Props> {
+  @observable redirectTo: ?string;
+
+  onUploadImage = async (file: File) => {
+    const result = await uploadFile(file, { documentId: this.props.id });
+    return result.url;
+  };
+
+  onClickLink = (href: string) => {
+    // on page hash
+    if (href[0] === "#") {
+      window.location.href = href;
+      return;
+    }
+
+    if (isInternalUrl(href)) {
+      // relative
+      let navigateTo = href;
+
+      // probably absolute
+      if (href[0] !== "/") {
+        try {
+          const url = new URL(href);
+          navigateTo = url.pathname + url.hash;
+        } catch (err) {
+          navigateTo = href;
+        }
+      }
+
+      this.props.history.push(navigateTo);
+    } else {
+      window.open(href, "_blank");
+    }
+  };
+
+  onShowToast = (message: string) => {
+    this.props.ui.showToast(message);
+  };
+
+  render() {
+    return (
+      <StyledEditor
+        ref={this.props.forwardedRef}
+        uploadImage={this.onUploadImage}
+        onClickLink={this.onClickLink}
+        onShowToast={this.onShowToast}
+        embeds={this.props.disableEmbeds ? EMPTY_ARRAY : embeds}
+        tooltip={EditorTooltip}
+        {...this.props}
+      />
+    );
+  }
+}
+
+const StyledEditor = styled(RichMarkdownEditor)`
+  flex-grow: ${props => (props.grow ? 1 : 0)};
+  justify-content: start;
+
+  > div {
+    transition: ${props => props.theme.backgroundTransition};
+  }
+
+  p {
+    a {
+      color: ${props => props.theme.link};
+      border-bottom: 1px solid ${props => lighten(0.5, props.theme.link)};
+      font-weight: 500;
+
+      &:hover {
+        border-bottom: 1px solid ${props => props.theme.link};
+        text-decoration: none;
+      }
+    }
+  }
+`;
+
+const EditorTooltip = ({ children, ...props }) => (
+  <Tooltip offset="0, 16" delay={150} {...props}>
+    <span>{children}</span>
+  </Tooltip>
+);
+
+const EditorWithRouterAndTheme = withRouter(withTheme(Editor));
+
+export default React.forwardRef((props, ref) => (
+  <EditorWithRouterAndTheme {...props} forwardedRef={ref} />
+));