/
index.ts
142 lines (128 loc) · 3.97 KB
/
index.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import '@logseq/libs'
import { SettingSchemaDesc } from '@logseq/libs/dist/LSPlugin.user';
import { createPopup } from '@picmo/popup-picker'
import { autoTheme, darkTheme, lightTheme } from 'picmo'
/**
* main entry
*/
async function main() {
const emojiPickerEl = document.createElement('div')
emojiPickerEl.classList.add('emoji-picker-trigger')
document.getElementById('app').appendChild(emojiPickerEl)
const customEmoji = [
{
emoji: 'doge',
label: 'Doge',
url: 'https://i.imgur.com/HeGEEbu.jpeg',
tags: ['dog', 'doge', 'meme'],
data: { id: 1 }
},
{
emoji: 'logseq',
label: 'Logseq',
url: 'https://raw.githubusercontent.com/logseq/logseq/master/resources/icons/logseq.png',
tags: ['logo', 'logseq'],
data: { id: 2 }
},
{
emoji: 'nyancat',
label: 'Nyan cat',
url: 'https://i.imgur.com/MjeqeUP.gif',
tags: ['cat', 'rainbow', 'meme'],
data: { id: 3 }
},
{
emoji: 'partyparrot',
label: 'party parrot',
url: 'https://i.imgur.com/IJsMwM4.gif',
tags: ['party', 'parrot', 'meme'],
data: { id: 4 }
}
]
let emojiSelected = false
let picker = null
let makePicker = async () => {
if (picker) {
return picker
}
let themeMap = { 'dark': darkTheme, 'light': lightTheme }
const logseqTheme = await logseq.App.getStateFromStore<'dark' | 'light'>('ui/theme')
if(logseq.settings.customEmojiSettings === undefined){
logseq.updateSettings({
customEmojiSettings: customEmoji,
});
}
picker = createPopup({
theme: themeMap[logseqTheme],
custom: logseq.settings.customEmojiSettings,
autoFocusSearch: true,
animate: false,
initialCategory: 'recents',
}, {
triggerElement: emojiPickerEl,
referenceElement: emojiPickerEl,
position: 'bottom-start',
showCloseButton: false
})
picker.addEventListener('emoji:select', async (selection) => {
emojiSelected = true
logseq.hideMainUI()
if (selection.url) {
const img = document.createElement('img')
img.src = selection.url
img.alt = selection.emoji
img.setAttribute('style', 'max-height:1em;width:auto;height:auto;display:inline-block')
const emojiStr = img.outerHTML.replace('>', ' />')
await logseq.Editor.insertAtEditingCursor(emojiStr)
} else {
await logseq.Editor.insertAtEditingCursor(selection.emoji)
}
})
//ESC
document.addEventListener('keydown', function (e) {
if (e.key === "Escape") {
logseq.hideMainUI({ restoreEditingCursor: true })
}
e.stopPropagation()
}, false)
document.addEventListener('click', (e) => {
if (!(e.target as HTMLElement).closest('div[class*="picmo__popupContainer"]') && !emojiSelected) {
logseq.hideMainUI({ restoreEditingCursor: true })
}
emojiSelected = false
})
return picker
}
const schema:Array<SettingSchemaDesc> = [
{
key:"customEmojiSettings",
type:"object",
default: customEmoji,
title:"Custom Emoji Settings",
description:"Add custom emoji in json config (reload plugin to take effect).",
}
];
logseq.useSettingsSchema(schema)
logseq.App.onThemeModeChanged( async () => {
let themeMap = { 'dark': darkTheme, 'light': lightTheme }
const logseqTheme = await logseq.App.getStateFromStore<'dark' | 'light'>('ui/theme')
let theme = themeMap[logseqTheme]
picker.picker.updateOptions({ theme })
})
logseq.Editor.registerSlashCommand(
'😀 Emoji picker', async () => {
const { left, top, rect, } = await logseq.Editor.getEditingCursorPosition()
Object.assign(emojiPickerEl.style, {
top: top + rect.top + 'px',
left: left + rect.left + 'px',
})
picker = await makePicker()
logseq.showMainUI()
setTimeout(() => {
picker.open()
}, 100)
},
)
}
// bootstrap
logseq.ready(main).catch(console.error)