From c308a2378fc119638ea8faa3ddd635ab534f11a9 Mon Sep 17 00:00:00 2001 From: Tom Moor Date: Sun, 18 Nov 2018 11:14:26 -0800 Subject: [PATCH] stash --- .../Document => }/components/Editor.js | 60 ++++++++++++++++--- app/components/InputRich.js | 49 ++++++++++----- app/scenes/CollectionEdit.js | 2 +- app/scenes/Document/Document.js | 48 ++------------- server/models/Team.js | 2 +- 5 files changed, 94 insertions(+), 67 deletions(-) rename app/{scenes/Document => }/components/Editor.js (59%) diff --git a/app/scenes/Document/components/Editor.js b/app/components/Editor.js similarity index 59% rename from app/scenes/Document/components/Editor.js rename to app/components/Editor.js index aec86e85..26b2002a 100644 --- a/app/scenes/Document/components/Editor.js +++ b/app/components/Editor.js @@ -4,13 +4,17 @@ import styled from 'styled-components'; import { Text } from 'slate'; import RichMarkdownEditor, { Placeholder } from 'rich-markdown-editor'; import ClickablePadding from 'components/ClickablePadding'; -import schema from '../schema'; +import { uploadFile } from 'utils/uploadFile'; +import isInternalUrl from 'utils/isInternalUrl'; type Props = { titlePlaceholder?: string, bodyPlaceholder?: string, defaultValue?: string, - readOnly: boolean, + readOnly?: boolean, + expandToFit?: boolean, + history: *, + ui: *, }; class Editor extends React.Component { @@ -34,6 +38,42 @@ class Editor extends React.Component { if (this.editor) this.editor.focusAtEnd(); }; + onUploadImage = async (file: File) => { + const result = await uploadFile(file); + 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, 'success'); + }; + renderPlaceholder = (props: *) => { const { editor, node } = props; @@ -52,20 +92,24 @@ class Editor extends React.Component { }; render() { - const { readOnly } = this.props; + const { readOnly, expandToFit } = this.props; return ( - + {expandToFit && ( + + )} ); } diff --git a/app/components/InputRich.js b/app/components/InputRich.js index d2b08843..5d7b6dcd 100644 --- a/app/components/InputRich.js +++ b/app/components/InputRich.js @@ -1,29 +1,46 @@ // @flow import * as React from 'react'; +import { observable } from 'mobx'; +import { observer, inject } from 'mobx-react'; +import { withRouter } from 'react-router-dom'; import styled from 'styled-components'; -import RichMarkdownEditor from 'rich-markdown-editor'; import { LabelText, Outline } from 'components/Input'; type Props = { label: string, minHeight?: number, maxHeight?: number, + readOnly?: boolean, + history: *, + ui: *, }; -export default function InputRich({ - label, - minHeight, - maxHeight, - ...rest -}: Props) { - return ( - - {label} - - - - - ); +@observer +class InputRich extends React.Component { + @observable editorComponent; + + componentDidMount() { + this.loadEditor(); + } + + loadEditor = async () => { + const EditorImport = await import('./Editor'); + this.editorComponent = EditorImport.default; + }; + + render() { + const { label, minHeight, maxHeight, ...rest } = this.props; + const Editor = this.editorComponent; + + return ( + + {label} + + {Editor && } + + + ); + } } const StyledOutline = styled(Outline)` @@ -36,3 +53,5 @@ const StyledOutline = styled(Outline)` display: block; } `; + +export default inject('ui')(withRouter(InputRich)); diff --git a/app/scenes/CollectionEdit.js b/app/scenes/CollectionEdit.js index c6872098..cf1d4d87 100644 --- a/app/scenes/CollectionEdit.js +++ b/app/scenes/CollectionEdit.js @@ -65,7 +65,7 @@ class CollectionEdit extends React.Component {
You can edit a collection’s details at any time, however doing so - might confuse your team mates. + often might confuse your team mates. { }; loadEditor = async () => { - const EditorImport = await import('./components/Editor'); + const EditorImport = await import('components/Editor'); this.editorComponent = EditorImport.default; }; @@ -259,11 +258,6 @@ class DocumentScene extends React.Component { this.props.history.push(url); }; - onUploadImage = async (file: File) => { - const result = await uploadFile(file); - return result.url; - }; - onSearchLink = async (term: string) => { const results = await this.props.documents.search(term); @@ -273,37 +267,6 @@ class DocumentScene extends React.Component { })); }; - 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, 'success'); - }; - render() { const { location, match } = this.props; const Editor = this.editorComponent; @@ -386,17 +349,18 @@ class DocumentScene extends React.Component { bodyPlaceholder="…the rest is your canvas" defaultValue={revision ? revision.text : document.text} pretitle={document.emoji} - uploadImage={this.onUploadImage} onImageUploadStart={this.onImageUploadStart} onImageUploadStop={this.onImageUploadStop} onSearchLink={this.onSearchLink} - onClickLink={this.onClickLink} onChange={this.onChange} onSave={this.onSave} onCancel={this.onDiscard} - onShowToast={this.onShowToast} readOnly={!this.isEditing} toc={!revision} + history={this.props.history} + ui={this.props.ui} + schema={schema} + expandToFit /> diff --git a/server/models/Team.js b/server/models/Team.js index fdecf2f3..d4e1868c 100644 --- a/server/models/Team.js +++ b/server/models/Team.js @@ -109,7 +109,7 @@ Team.prototype.provisionSubdomain = async function(subdomain) { Team.prototype.provisionFirstCollection = async function(userId) { return await Collection.create({ name: 'General', - description: 'Your first Collection', + description: '', type: 'atlas', teamId: this.id, creatorId: userId,