mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-23 03:27:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add Emoji/FA Autocompletion (#387)

Browse source 
added emoji/fork-awesome autocompletion
added autocompletion e2e test

Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
This commit is contained in:
Philip Molares 2020-08-14 13:58:59 +02:00 • committed by GitHub
parent c8c5569426
commit c15f0d9900
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 279 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/editor/editor-window/editor-window.tsx
View file

@ -1,4 +1,4 @@
import { Editor } from 'codemirror'
import { Editor, EditorChange } from 'codemirror'
import 'codemirror/addon/comment/comment'
import 'codemirror/addon/display/autorefresh'
import 'codemirror/addon/display/fullscreen'
@ -10,14 +10,16 @@ import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/edit/matchtags'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/search/match-highlighter'
import 'codemirror/addon/selection/active-line'
import 'codemirror/keymap/sublime.js'
import 'codemirror/mode/gfm/gfm.js'
import React, { useState } from 'react'
import React, { useCallback, useState } from 'react'
import { Controlled as ControlledCodeMirror } from 'react-codemirror2'
import { useTranslation } from 'react-i18next'
import './editor-window.scss'
import { emojiHints, emojiWordRegex, findWordAtCursor } from './hints/emoji'
import { defaultKeyMap } from './key-map'
import { ToolBar } from './tool-bar/tool-bar'
@ -26,10 +28,28 @@ export interface EditorWindowProps {
content: string
}
const hintOptions = {
hint: emojiHints,
completeSingle: false,
completeOnSingleClick: false,
alignWithWord: true
}
const onChange = (editor: Editor) => {
const searchTerm = findWordAtCursor(editor)
if (emojiWordRegex.test(searchTerm.text)) {
editor.showHint(hintOptions)
}
}
export const EditorWindow: React.FC<EditorWindowProps> = ({ onContentChange, content }) => {
const { t } = useTranslation()
const [editor, setEditor] = useState<Editor>()
const onBeforeChange = useCallback((editor: Editor, data: EditorChange, value: string) => {
onContentChange(value)
}, [onContentChange])
return (
<div className={'d-flex flex-column h-100'}>
<ToolBar
@ -67,12 +87,13 @@ export const EditorWindow: React.FC<EditorWindowProps> = ({ onContentChange, con
addModeClass: true,
autoRefresh: true,
// otherCursors: true,
placeholder: t('editor.placeholder')
placeholder: t('editor.placeholder'),
showHint: false,
hintOptions: hintOptions
}}
editorDidMount={mountedEditor => setEditor(mountedEditor)}
onBeforeChange={(editor, data, value) => {
onContentChange(value)
}}
onBeforeChange={onBeforeChange}
onChange={onChange}
/></div>
)
}