Skip to content

Commit

Permalink
Merge branch 'feature/new-editor' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
@blackforestboi
blackforestboi committed Nov 15, 2021
2 parents 50d3d99 + c0445cf commit e5947eb
Show file tree
Hide file tree
Showing 19 changed files with 1,553 additions and 190 deletions.
15 changes: 15 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,17 @@
"@sentry/node": "^6.14.3",
"@styled-icons/feather": "^10.0.0",
"@styled-icons/styled-icon": "^10.0.0",
"@tiptap/extension-bubble-menu": "^2.0.0-beta.49",
"@tiptap/extension-code-block": "^2.0.0-beta.29",
"@tiptap/extension-heading": "^2.0.0-beta.23",
"@tiptap/extension-highlight": "^2.0.0-beta.30",
"@tiptap/extension-image": "^2.0.0-beta.24",
"@tiptap/extension-link": "^2.0.0-beta.28",
"@tiptap/extension-placeholder": "^2.0.0-beta.43",
"@tiptap/extension-typography": "^2.0.0-beta.19",
"@tiptap/react": "^2.0.0-beta.93",
"@tiptap/starter-kit": "^2.0.0-beta.140",
"@types/marked": "^4.0.0",
"@types/socket.io-client": "^1.4.32",
"@types/ua-parser-js": "^0.7.36",
"approx-string-match": "^1.1.0",
Expand Down Expand Up @@ -79,7 +90,9 @@
"immutability-helper": "^3.0.1",
"jsdom": "^16.2.2",
"json-date-parser": "^1.0.1",
"json2md": "^1.12.0",
"lodash": "^4.17.4",
"marked": "^4.0.2",
"moment": "^2.18.1",
"moment-timezone": "^0.5.14",
"mousetrap": "^1.6.5",
Expand Down Expand Up @@ -132,6 +145,7 @@
"styled-props": "^1.1.2",
"through2": "^2.0.3",
"traverse": "^0.6.6",
"turndown": "^7.1.1",
"tweetnacl": "^1.0.1",
"tweetnacl-async": "^2.0.0",
"tweetnacl-util": "^0.15.0",
Expand Down Expand Up @@ -184,6 +198,7 @@
"@types/simple-peer": "^6.1.6",
"@types/sinon": "^7.0.3",
"@types/styled-components": "^5.1.4",
"@types/turndown": "^5.0.1",
"@types/url-regex": "^4.1.0",
"@types/whatwg-url": "^6.4.0",
"atob": "^2.1.2",
Expand Down
165 changes: 120 additions & 45 deletions src/annotations/components/AnnotationCreate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,32 +3,45 @@ import styled from 'styled-components'
import onClickOutside from 'react-onclickoutside'

import { ButtonTooltip } from 'src/common-ui/components'
import { MarkdownPreviewAnnotationInsertMenu } from 'src/markdown-preview/markdown-preview-insert-menu'
import { FocusableComponent } from './types'
import { insertTab, uninsertTab } from 'src/common-ui/utils'
import { getKeyName } from 'src/util/os-specific-key-names'
import TagHolder from 'src/tags/ui/tag-holder'
import { HoverBox } from 'src/common-ui/components/design-library/HoverBox'
import { ClickAway } from 'src/util/click-away-wrapper'
import TagPicker, { TagPickerDependencies } from 'src/tags/ui/TagPicker'
import SaveBtn from './save-btn'
import MemexEditor, { MemexEditorInstance } from './editor/editor'
import MarkdownHelp from './MarkdownHelp'
import * as icons from 'src/common-ui/components/design-library/icons'
import TagsSegment from 'src/common-ui/components/result-item-tags-segment'
import type { NoteResultHoverState } from './types'
import type { AnnotationFooterEventProps } from 'src/annotations/components/AnnotationFooter'

interface State {
isTagPickerShown: boolean
isMarkdownHelpShown: boolean
}

export interface AnnotationCreateEventProps {
onSave: (shouldShare: boolean, isProtected?: boolean) => Promise<void>
onCancel: () => void
onTagsUpdate: (tags: string[]) => void
onCommentChange: (text: string) => void
onTagsHover?: React.MouseEventHandler
annotationFooterDependencies?: AnnotationFooterEventProps
onFooterHover?: React.MouseEventHandler
onNoteHover?: React.MouseEventHandler
onUnhover?: React.MouseEventHandler
}

export interface AnnotationCreateGeneralProps {
hide?: () => void
autoFocus?: boolean
comment: string
tags: string[]
onTagClick?: (tag: string) => void
hoverState: NoteResultHoverState
toggleMarkdownHelp?: () => void
}

export interface Props
Expand All @@ -45,13 +58,23 @@ export class AnnotationCreate extends React.Component<Props, State>
implements FocusableComponent {
static ALT_KEY = getKeyName({ key: 'alt' })
static MOD_KEY = getKeyName({ key: 'mod' })
private textAreaRef = React.createRef<HTMLTextAreaElement>()
private markdownPreviewRef = React.createRef<
MarkdownPreviewAnnotationInsertMenu
>()
//private textAreaRef = React.createRef<HTMLTextAreaElement>()
// private markdownPreviewRef = React.createRef<
// MarkdownPreviewAnnotationInsertMenu
// >()

private annotCreateRef = React.createRef<AnnotationCreate>()

static defaultProps: Pick<Props, 'hoverState' | 'tags'> = {
tags: [],
hoverState: null,
}

private editor: MemexEditorInstance

state: State = {
isTagPickerShown: false,
isMarkdownHelpShown: false,
}

componentDidMount() {
Expand All @@ -62,8 +85,8 @@ export class AnnotationCreate extends React.Component<Props, State>

focus() {
const inputLen = this.props.comment.length
this.textAreaRef.current.focus()
this.textAreaRef.current.setSelectionRange(inputLen, inputLen)
// this.textAreaRef.current.focus()
// this.textAreaRef.current.setSelectionRange(inputLen, inputLen)
}

handleClickOutside() {
Expand All @@ -73,19 +96,18 @@ export class AnnotationCreate extends React.Component<Props, State>
}

private hideTagPicker = () => this.setState({ isTagPickerShown: false })
private toggleMarkdownHelp = () => this.props.toggleMarkdownHelp
private hideMarkdownHelp = () =>
this.setState({ isMarkdownHelpShown: false })
private handleCancel = () => this.props.onCancel()
private handleSave = async (
shouldShare: boolean,
isProtected?: boolean,
) => {
const saveP = this.props.onSave(shouldShare, isProtected)

if (
this.markdownPreviewRef?.current?.markdownPreviewRef.current?.state
.showPreview
) {
this.markdownPreviewRef.current.markdownPreviewRef.current.togglePreview()
}
this.editor?.resetState()
this.setState({ isMarkdownHelpShown: false })

await saveP
}
Expand Down Expand Up @@ -119,15 +141,15 @@ export class AnnotationCreate extends React.Component<Props, State>
return this.handleSave(false, false)
}

if (e.key === 'Tab' && !e.shiftKey) {
e.preventDefault()
insertTab({ el: this.textAreaRef.current })
}
// if (e.key === 'Tab' && !e.shiftKey) {
// e.preventDefault()
// insertTab({ el: this.textAreaRef.current })
// }

if (e.key === 'Tab' && e.shiftKey) {
e.preventDefault()
uninsertTab({ el: this.textAreaRef.current })
}
// if (e.key === 'Tab' && e.shiftKey) {
// e.preventDefault()
// uninsertTab({ el: this.textAreaRef.current })
// }
}

private renderTagPicker() {
Expand All @@ -136,7 +158,7 @@ export class AnnotationCreate extends React.Component<Props, State>
this.setState({ isTagPickerShown })

const tagPicker = !this.state.isTagPickerShown ? null : (
<HoverBox>
<HoverBox right="0px">
<ClickAway onClickAway={() => setPickerShown(false)}>
<TagPicker
{...this.props}
Expand Down Expand Up @@ -166,12 +188,31 @@ export class AnnotationCreate extends React.Component<Props, State>
)
}

private renderMarkdownHelpButton() {
const setPickerShown = (isMarkdownHelpShown: boolean) =>
this.setState({ isMarkdownHelpShown })

return (
<MarkdownButtonContainer>
<ButtonTooltip
tooltipText="Toggle formatting help"
position="bottom"
>
<MarkdownButton
src={icons.helpIcon}
onClick={() => this.props.toggleMarkdownHelp()}
/>
</ButtonTooltip>
</MarkdownButtonContainer>
)
}

private renderActionButtons() {
return (
<FooterStyled>
<Flex>
<SaveBtn onSave={this.handleSave} />
<ButtonTooltip tooltipText="esc" position="bottomSidebar">
<ButtonTooltip tooltipText="esc" position="bottom">
<CancelBtnStyled onClick={this.handleCancel}>
Cancel
</CancelBtnStyled>
Expand All @@ -184,28 +225,37 @@ export class AnnotationCreate extends React.Component<Props, State>
render() {
return (
<TextBoxContainerStyled>
<MarkdownPreviewAnnotationInsertMenu
ref={this.markdownPreviewRef}
customRef={this.textAreaRef}
<MemexEditor
onKeyDown={this.handleInputKeyDown}
value={this.props.comment}
updateInputValue={this.props.onCommentChange}
renderInput={(inputProps) => (
<StyledTextArea
{...inputProps}
value={this.props.comment}
onClick={this.hideTagPicker}
placeholder={`Add private note. Save with ${AnnotationCreate.MOD_KEY}+enter (+shift to share)`}
onChange={(e) =>
this.props.onCommentChange(e.target.value)
}
/>
)}
onContentUpdate={(content) =>
this.props.onCommentChange(content)
}
markdownContent={this.props.comment}
setEditorInstanceRef={(editor) => (this.editor = editor)}
placeholder={`Add private note. Save with ${AnnotationCreate.MOD_KEY}+enter (+shift to share)`}
toggleMarkdownHelp={() => {
this.props.toggleMarkdownHelp()
}}
/>
{this.props.comment !== '' && (
<>
{this.renderTagPicker()}
{this.renderActionButtons()}
<TagsSegment
tags={this.props.tags}
onMouseEnter={this.props.onTagsHover}
showEditBtn={this.props.hoverState === 'tags'}
onTagClick={this.props.onTagClick}
onEditBtnClick={
this.props.annotationFooterDependencies
?.onTagIconClick
}
/>
<FooterContainer>
<SaveActionBar>
{this.renderActionButtons()}
{this.renderMarkdownHelpButton()}
</SaveActionBar>
{this.renderTagPicker()}
</FooterContainer>
</>
)}
</TextBoxContainerStyled>
Expand All @@ -215,6 +265,33 @@ export class AnnotationCreate extends React.Component<Props, State>

export default onClickOutside(AnnotationCreate)

const FooterContainer = styled.div`
border-top: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 15px 5px 5px;
`

const SaveActionBar = styled.div`
display: flex;
justify-content: flex-start;
align-items: center;
`

const MarkdownButtonContainer = styled.div`
display: flex;
`

const MarkdownButton = styled.img`
display: flex;
height: 16px;
opacity: 0.8;
mask-position: center center;
margin-left: 10px;
cursor: pointer;
`

const TextBoxContainerStyled = styled.div`
box-shadow: none;
cursor: default;
Expand Down Expand Up @@ -268,8 +345,6 @@ const FooterStyled = styled.div`
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
margin: 0 5px 3px 5px;
height: 26px;
animation: slideIn 0.2s ease-in-out;
animation-fill-mode: forwards;
`
Expand All @@ -296,6 +371,6 @@ const CancelBtnStyled = styled.div`

const Flex = styled.div`
display: flex;
padding: 0 5px 5px;
justify-content: flex-end;
align-items: center;
`
Loading

0 comments on commit e5947eb

Please sign in to comment.