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 picker (#329)

Browse source 
* Added emoji-mart as emoji-picker
* Fixed JSON to TypeScript-object parsing
* added fork awesome to emoji-picker
added ForkAwesomeIcons enum, because it's not possible to iterate over a typescript type consisting of strings [1]. This is a bit unfortunate since we now have two lists of all the fork awesome icons, but sadly it can not be done another way.
added fork awesome as a custom category to the emoji picker.

[1]: https://stackoverflow.com/questions/40863488/how-to-iterate-over-a-custom-literal-type-in-typescript
* made picker close, when clicking away
added react-use dependency for useClickAway hook
* Fixed emoji-picker loading images from unpkg instead of using font
* fixed addEmoji function
added tests
* Extract customIcons into useMemo

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Co-authored-by: Erik Michelson <github@erik.michelson.eu>
Co-authored-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
This commit is contained in:
Philip Molares 2020-08-07 18:54:37 +02:00 • committed by GitHub
parent fc2e2bd592
commit c410a58573
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 1321 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/editor/editor-window/tool-bar/utils.ts
View file

@ -1,4 +1,5 @@
import { Editor } from 'codemirror'
import { BaseEmoji, CustomEmoji, EmojiData } from 'emoji-mart'
export const makeSelectionBold = (editor: Editor): void => wrapTextWith(editor, '**')
export const makeSelectionItalic = (editor: Editor): void => wrapTextWith(editor, '*')
@ -22,6 +23,17 @@ export const addLine = (editor: Editor): void => changeLines(editor, line => `${
export const addComment = (editor: Editor): void => changeLines(editor, line => `${line}\n> []`)
export const addTable = (editor: Editor): void => changeLines(editor, line => `${line}\n| Column 1 | Column 2 | Column 3 |\n| -------- | -------- | -------- |\n| Text | Text | Text |`)
export const addEmoji = (emoji: EmojiData, editor: Editor): void => {
let replacement = ''
if ((emoji as BaseEmoji).native) {
replacement = (emoji as BaseEmoji).native
} else if ((emoji as CustomEmoji).imageUrl) {
// noinspection CheckTagEmptyBody
replacement = `<i class="fa ${(emoji as CustomEmoji).name}"></i>`
}
insertAtCursor(editor, replacement)
}
export const wrapTextWith = (editor: Editor, symbol: string, endSymbol?: string): void => {
if (!editor.getSelection()) {
return
@ -98,3 +110,13 @@ export const addLink = (editor: Editor, prefix?: string): void => {
}
}
}
export const insertAtCursor = (editor: Editor, text: string): void => {
const cursor = editor.getCursor()
const ranges = editor.listSelections()
for (const range of ranges) {
const from = range.empty() ? { line: cursor.line, ch: cursor.ch } : range.from()
const to = range.empty() ? { line: cursor.line, ch: cursor.ch } : range.to()
editor.replaceRange(`${text}`, from, to, '+input')
}
}