frontend > app

app/components/Editor/components/Toolbar/Toolbar.js

@@ -0,0 +1,159 @@
+// @flow
+import React, { Component } from 'react';
+import Portal from 'react-portal';
+import styled from 'styled-components';
+import _ from 'lodash';
+import type { State } from '../../types';
+import FormattingToolbar from './components/FormattingToolbar';
+import LinkToolbar from './components/LinkToolbar';
+
+export default class Toolbar extends Component {
+  props: {
+    state: State,
+    onChange: Function,
+  };
+
+  menu: HTMLElement;
+  state: {
+    active: boolean,
+    focused: boolean,
+    link: React$Element<any>,
+    top: string,
+    left: string,
+  };
+
+  state = {
+    active: false,
+    focused: false,
+    link: null,
+    top: '',
+    left: '',
+  };
+
+  componentDidMount = () => {
+    this.update();
+  };
+
+  componentDidUpdate = () => {
+    this.update();
+  };
+
+  handleFocus = () => {
+    this.setState({ focused: true });
+  };
+
+  handleBlur = () => {
+    this.setState({ focused: false });
+  };
+
+  get linkInSelection(): any {
+    const { state } = this.props;
+
+    try {
+      const selectedLinks = state.startBlock
+        .getInlinesAtRange(state.selection)
+        .filter(node => node.type === 'link');
+      if (selectedLinks.size) {
+        return selectedLinks.first();
+      }
+    } catch (err) {
+      //
+    }
+  }
+
+  update = () => {
+    const { state } = this.props;
+    const link = this.linkInSelection;
+
+    if (state.isBlurred || (state.isCollapsed && !link)) {
+      if (this.state.active && !this.state.focused) {
+        this.setState({ active: false, link: null, top: '', left: '' });
+      }
+      return;
+    }
+
+    // don't display toolbar for document title
+    const firstNode = state.document.nodes.first();
+    if (firstNode === state.startBlock) return;
+
+    // don't display toolbar for code blocks
+    if (state.startBlock.type === 'code') return;
+
+    const data = {
+      ...this.state,
+      active: true,
+      link,
+      focused: !!link,
+    };
+
+    if (!_.isEqual(data, this.state)) {
+      const padding = 16;
+      const selection = window.getSelection();
+      const range = selection.getRangeAt(0);
+      const rect = range.getBoundingClientRect();
+
+      if (rect.top === 0 && rect.left === 0) {
+        this.setState(data);
+        return;
+      }
+
+      const left =
+        rect.left + window.scrollX - this.menu.offsetWidth / 2 + rect.width / 2;
+      data.top = `${Math.round(rect.top + window.scrollY - this.menu.offsetHeight)}px`;
+      data.left = `${Math.round(Math.max(padding, left))}px`;
+      this.setState(data);
+    }
+  };
+
+  setRef = (ref: HTMLElement) => {
+    this.menu = ref;
+  };
+
+  render() {
+    const link = this.state.link;
+
+    const style = {
+      top: this.state.top,
+      left: this.state.left,
+    };
+
+    return (
+      <Portal isOpened>
+        <Menu active={this.state.active} innerRef={this.setRef} style={style}>
+          {link &&
+            <LinkToolbar
+              {...this.props}
+              link={link}
+              onBlur={this.handleBlur}
+            />}
+          {!link &&
+            <FormattingToolbar
+              onCreateLink={this.handleFocus}
+              {...this.props}
+            />}
+        </Menu>
+      </Portal>
+    );
+  }
+}
+
+const Menu = styled.div`
+  padding: 8px 16px;
+  position: absolute;
+  z-index: 1;
+  top: -10000px;
+  left: -10000px;
+  opacity: 0;
+  background-color: #2F3336;
+  border-radius: 4px;
+  transform: scale(.95);
+  transition: opacity 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  line-height: 0;
+  height: 40px;
+  min-width: 260px;
+
+  ${({ active }) => active && `
+    transform: translateY(-6px) scale(1);
+    opacity: 1;
+  `}
+`;

app/components/Editor/components/Toolbar/components/DocumentResult.js

@@ -0,0 +1,47 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { fontWeight, color } from 'styles/constants';
+import Document from 'models/Document';
+import NextIcon from 'components/Icon/NextIcon';
+
+type Props = {
+  innerRef?: Function,
+  onClick: SyntheticEvent => void,
+  document: Document,
+};
+
+function DocumentResult({ document, ...rest }: Props) {
+  return (
+    <ListItem {...rest} href="">
+      <i><NextIcon light /></i>
+      {document.title}
+    </ListItem>
+  );
+}
+
+const ListItem = styled.a`
+  display: flex;
+  align-items: center;
+  height: 24px;
+  padding: 4px 8px 4px 0;
+  color: ${color.white};
+  font-size: 15px;
+
+  i {
+    visibility: hidden;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    font-weight: ${fontWeight.medium};
+    outline: none;
+
+    i {
+      visibility: visible;
+    }
+  }
+`;
+
+export default DocumentResult;

app/components/Editor/components/Toolbar/components/FormattingToolbar.js

@@ -0,0 +1,118 @@
+// @flow
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import type { State } from '../../../types';
+import ToolbarButton from './ToolbarButton';
+import BoldIcon from 'components/Icon/BoldIcon';
+import CodeIcon from 'components/Icon/CodeIcon';
+import Heading1Icon from 'components/Icon/Heading1Icon';
+import Heading2Icon from 'components/Icon/Heading2Icon';
+import ItalicIcon from 'components/Icon/ItalicIcon';
+import LinkIcon from 'components/Icon/LinkIcon';
+import StrikethroughIcon from 'components/Icon/StrikethroughIcon';
+
+class FormattingToolbar extends Component {
+  props: {
+    state: State,
+    onChange: Function,
+    onCreateLink: Function,
+  };
+
+  /**
+   * Check if the current selection has a mark with `type` in it.
+   *
+   * @param {String} type
+   * @return {Boolean}
+   */
+  hasMark = (type: string) => {
+    return this.props.state.marks.some(mark => mark.type === type);
+  };
+
+  isBlock = (type: string) => {
+    return this.props.state.startBlock.type === type;
+  };
+
+  /**
+   * When a mark button is clicked, toggle the current mark.
+   *
+   * @param {Event} ev
+   * @param {String} type
+   */
+  onClickMark = (ev: SyntheticEvent, type: string) => {
+    ev.preventDefault();
+    let { state } = this.props;
+
+    state = state.transform().toggleMark(type).apply();
+    this.props.onChange(state);
+  };
+
+  onClickBlock = (ev: SyntheticEvent, type: string) => {
+    ev.preventDefault();
+    let { state } = this.props;
+
+    state = state.transform().setBlock(type).apply();
+    this.props.onChange(state);
+  };
+
+  onCreateLink = (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    let { state } = this.props;
+    const data = { href: '' };
+    state = state.transform().wrapInline({ type: 'link', data }).apply();
+    this.props.onChange(state);
+    this.props.onCreateLink();
+  };
+
+  renderMarkButton = (type: string, IconClass: Function) => {
+    const isActive = this.hasMark(type);
+    const onMouseDown = ev => this.onClickMark(ev, type);
+
+    return (
+      <ToolbarButton onMouseDown={onMouseDown} active={isActive}>
+        <IconClass light />
+      </ToolbarButton>
+    );
+  };
+
+  renderBlockButton = (type: string, IconClass: Function) => {
+    const isActive = this.isBlock(type);
+    const onMouseDown = ev =>
+      this.onClickBlock(ev, isActive ? 'paragraph' : type);
+
+    return (
+      <ToolbarButton onMouseDown={onMouseDown} active={isActive}>
+        <IconClass light />
+      </ToolbarButton>
+    );
+  };
+
+  render() {
+    return (
+      <span>
+        {this.renderMarkButton('bold', BoldIcon)}
+        {this.renderMarkButton('italic', ItalicIcon)}
+        {this.renderMarkButton('deleted', StrikethroughIcon)}
+        {this.renderMarkButton('code', CodeIcon)}
+        <Separator />
+        {this.renderBlockButton('heading1', Heading1Icon)}
+        {this.renderBlockButton('heading2', Heading2Icon)}
+        <Separator />
+        <ToolbarButton onMouseDown={this.onCreateLink}>
+          <LinkIcon light />
+        </ToolbarButton>
+      </span>
+    );
+  }
+}
+
+const Separator = styled.div`
+  height: 100%;
+  width: 1px;
+  background: #FFF;
+  opacity: .2;
+  display: inline-block;
+  margin-left: 10px;
+`;
+
+export default FormattingToolbar;

app/components/Editor/components/Toolbar/components/LinkToolbar.js

@@ -0,0 +1,212 @@
+// @flow
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import { observable, action } from 'mobx';
+import { observer, inject } from 'mobx-react';
+import { withRouter } from 'react-router';
+import styled from 'styled-components';
+import ArrowKeyNavigation from 'boundless-arrow-key-navigation';
+import ToolbarButton from './ToolbarButton';
+import DocumentResult from './DocumentResult';
+import type { State } from '../../../types';
+import DocumentsStore from 'stores/DocumentsStore';
+import keydown from 'react-keydown';
+import CloseIcon from 'components/Icon/CloseIcon';
+import OpenIcon from 'components/Icon/OpenIcon';
+import TrashIcon from 'components/Icon/TrashIcon';
+import Flex from 'components/Flex';
+
+@keydown
+@observer
+class LinkToolbar extends Component {
+  input: HTMLElement;
+  firstDocument: HTMLElement;
+
+  props: {
+    state: State,
+    link: Object,
+    documents: DocumentsStore,
+    onBlur: () => void,
+    onChange: State => void,
+  };
+
+  @observable isEditing: boolean = false;
+  @observable isFetching: boolean = false;
+  @observable resultIds: string[] = [];
+  @observable searchTerm: ?string = null;
+
+  componentWillMount() {
+    this.isEditing = !!this.props.link.data.get('href');
+  }
+
+  @action search = async () => {
+    this.isFetching = true;
+
+    if (this.searchTerm) {
+      try {
+        this.resultIds = await this.props.documents.search(this.searchTerm);
+      } catch (err) {
+        console.error(err);
+      }
+    } else {
+      this.resultIds = [];
+    }
+
+    this.isFetching = false;
+  };
+
+  selectDocument = (ev, document) => {
+    ev.preventDefault();
+    this.save(document.url);
+  };
+
+  onKeyDown = (ev: SyntheticKeyboardEvent & SyntheticInputEvent) => {
+    switch (ev.keyCode) {
+      case 13: // enter
+        ev.preventDefault();
+        return this.save(ev.target.value);
+      case 27: // escape
+        return this.input.blur();
+      case 40: // down
+        ev.preventDefault();
+        if (this.firstDocument) {
+          const element = ReactDOM.findDOMNode(this.firstDocument);
+          if (element instanceof HTMLElement) element.focus();
+        }
+        break;
+      default:
+    }
+  };
+
+  onChange = (ev: SyntheticKeyboardEvent & SyntheticInputEvent) => {
+    try {
+      new URL(ev.target.value);
+    } catch (err) {
+      // this is not a valid url, show search suggestions
+      this.searchTerm = ev.target.value;
+      this.search();
+      return;
+    }
+    this.resultIds = [];
+  };
+
+  onBlur = () => {
+    if (!this.resultIds.length) {
+      if (this.input.value) {
+        this.props.onBlur();
+      } else {
+        this.removeLink();
+      }
+    }
+  };
+
+  removeLink = () => {
+    this.save('');
+  };
+
+  openLink = () => {
+    const href = this.props.link.data.get('href');
+    window.open(href, '_blank');
+  };
+
+  save = (href: string) => {
+    href = href.trim();
+    const { state } = this.props;
+    const transform = state.transform();
+
+    if (href) {
+      transform.setInline({ type: 'link', data: { href } });
+    } else {
+      transform.unwrapInline('link');
+    }
+
+    this.props.onChange(transform.apply());
+    this.props.onBlur();
+  };
+
+  setFirstDocumentRef = ref => {
+    this.firstDocument = ref;
+  };
+
+  render() {
+    const href = this.props.link.data.get('href');
+    const hasResults = this.resultIds.length > 0;
+
+    return (
+      <span>
+        <LinkEditor>
+          <Input
+            innerRef={ref => (this.input = ref)}
+            defaultValue={href}
+            placeholder="Search or paste a link…"
+            onBlur={this.onBlur}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onChange}
+            autoFocus
+          />
+          {this.isEditing &&
+            <ToolbarButton onMouseDown={this.openLink}>
+              <OpenIcon light />
+            </ToolbarButton>}
+          <ToolbarButton onMouseDown={this.removeLink}>
+            {this.isEditing ? <TrashIcon light /> : <CloseIcon light />}
+          </ToolbarButton>
+        </LinkEditor>
+        {hasResults &&
+          <SearchResults>
+            <ArrowKeyNavigation
+              mode={ArrowKeyNavigation.mode.VERTICAL}
+              defaultActiveChildIndex={0}
+            >
+              {this.resultIds.map((id, index) => {
+                const document = this.props.documents.getById(id);
+                if (!document) return null;
+
+                return (
+                  <DocumentResult
+                    innerRef={ref =>
+                      index === 0 && this.setFirstDocumentRef(ref)}
+                    document={document}
+                    key={document.id}
+                    onClick={ev => this.selectDocument(ev, document)}
+                  />
+                );
+              })}
+            </ArrowKeyNavigation>
+          </SearchResults>}
+      </span>
+    );
+  }
+}
+
+const SearchResults = styled.div`
+  background: #2F3336;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: auto;
+  left: 0;
+  padding: 8px;
+  margin-top: -3px;
+  margin-bottom: 0;
+  border-radius: 0 0 4px 4px;
+`;
+
+const LinkEditor = styled(Flex)`
+  margin-left: -8px;
+  margin-right: -8px;
+`;
+
+const Input = styled.input`
+  font-size: 15px;
+  background: rgba(255,255,255,.1);
+  border-radius: 2px;
+  padding: 4px 8px;
+  border: 0;
+  margin: 0;
+  outline: none;
+  color: #fff;
+  flex-grow: 1;
+`;
+
+export default withRouter(inject('documents')(LinkToolbar));

app/components/Editor/components/Toolbar/components/ToolbarButton.js

@@ -0,0 +1,26 @@
+// @flow
+import styled from 'styled-components';
+
+export default styled.button`
+  display: inline-block;
+  flex: 0;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  margin-left: 10px;
+  border: none;
+  background: none;
+  transition: opacity 100ms ease-in-out;
+  padding: 0;
+  opacity: .7;
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &:hover {
+    opacity: 1;
+  }
+
+  ${({ active }) => active && 'opacity: 1;'}
+`;

app/components/Editor/components/Toolbar/index.js

@@ -0,0 +1,3 @@
+// @flow
+import Toolbar from './Toolbar';
+export default Toolbar;