feat: 1.emoji picker support

package.json

@@ -134,6 +134,7 @@
  "@codemirror/language": "^6.4.0",
  "@codemirror/state": "^6.2.0",
  "@codemirror/view": "^6.7.3",
+ "@emoji-mart/data": "^1.1.2",
  "@vicons/ionicons5": "^0.12.0",
  "axios": "^1.1.3",
  "bing-chat": "^0.2.1",
@@ -143,6 +144,7 @@
  "chatgpt": "^4.4.1",
  "commander": "^9.4.1",
  "cursor-effects": "^1.0.8",
+ "emoji-mart": "^5.5.2",
  "jsonfile": "^6.1.0",
  "naive-ui": "^2.34.3",
  "obsidian-daily-notes-interface": "^0.9.4",
@@ -152,6 +154,7 @@
  "rrule": "^2.7.1",
  "sql.js": "^1.8.0",
  "svelte": "^3.53.1",
+ "twemoji": "^14.0.2",
  "vue": "^3.2.47",
  "vue-beautiful-chat": "^2.5.0",
  "vue3-radial-progress": "^1.1.1"

src/locale/en.ts

@@ -11,6 +11,7 @@ export default {
  'awesome-brain-manager-remove-check-in': 'Remove Habit Check In',
  'awesome-brain-manager-rollover': 'Rollover Todos Now',
  'awesome-brain-manager-undo': 'Undo last rollover',
+ 'awesome-brain-manager:open-emoji-picker': 'Open emoji picker'
  },
  setting: {
  cursorEffect: {

src/main.scss

@@ -18,3 +18,32 @@
 // .book__author {
 // color: var(--text-muted);
 // }
+
+// TODO 注意是否有样式穿透样式污染的问题
+img.emoji {
+ height: 1em;
+ width: 1em;
+ margin: 0 0.05em 0 0.1em;
+ vertical-align: -0.1em;
+ display: inline-block;
+}
+
+#emoji-modal {
+ padding: 0px;
+ min-width: unset;
+ width: unset !important;
+}
+
+#emoji-modal > .modal-content {
+ margin-top: 0px;
+}
+
+#emoji-modal > button {
+ background-color: unset;
+ border: 0px !important;
+ box-shadow: 0px !important;
+}
+
+#emoji-modal > .modal-close-button {
+ visibility: hidden;
+}

src/main.ts

@@ -18,6 +18,7 @@ import {
  addIcon,
  debounce,
  setIcon,
+ MarkdownPreviewRenderer,
 } from 'obsidian';
 
 import Replacer from './Replacer';
@@ -37,7 +38,7 @@ import {
  pomodoroDB,
 } from './utils/constants';
 import { monkeyPatchConsole } from './obsidian-hack/obsidian-debug-mobile';
-import { ImageOriginModal, PomodoroReminderModal } from './ui/modal/customModals';
+import { EmojiPickerModal, ImageOriginModal, PomodoroReminderModal } from './ui/modal/customModals';
 import { POMODORO_HISTORY_VIEW, PomodoroHistoryView } from './ui/view/PomodoroHistoryView';
 import { BROWSER_VIEW, BrowserView } from './ui/view/BrowserView';
 import { codeEmoji } from './render/Emoji';
@@ -126,6 +127,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
  spaceDB: Database;
  replacer: Replacer;
  process: Process;
+ emojiPickerModal: EmojiPickerModal;
 
  constructor(app: App, manifest: PluginManifest) {
  super(app, manifest);
@@ -598,6 +600,7 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
  await this.pluginDataIO.load();
  this.setupUI();
  this.setupCommands();
+ MarkdownPreviewRenderer.registerPostProcessor(this.process.EmojiProcess);
  this.registerMarkdownPostProcessor(codeEmoji);
  this.registerMarkdownCodeBlockProcessor('plantuml', this.process.UMLProcess);
  this.registerMarkdownCodeBlockProcessor('vue', this.process.VueProcess);
@@ -918,6 +921,25 @@ export default class AwesomeBrainManagerPlugin extends Plugin {
  return false;
  },
  });
+
+ this.addCommand({
+ id: 'awesome-brain-manager:open-emoji-picker',
+ name: t.command['awesome-brain-manager:open-emoji-picker'],
+ // 带条件的指令
+ checkCallback: (checking: boolean) => {
+ const leaf = this.app.workspace.activeLeaf;
+ if (leaf) {
+ if (!checking) {
+ if(!this.emojiPickerModal) {
+ this.emojiPickerModal = new EmojiPickerModal(this.app);
+ }
+ this.emojiPickerModal.open();
+ }
+ return true;
+ }
+ return false;
+ },
+ });
  }
 
  toggleDocumentDirection() {

src/process/Process.ts

@@ -1,5 +1,6 @@
-import type { Debouncer, MarkdownPostProcessorContext } from 'obsidian';
+import type { Debouncer, MarkdownPostProcessorContext, MarkdownPostProcessor } from 'obsidian';
 import { debounce, request } from 'obsidian';
+import twemoji from 'twemoji';
 import plantuml from 'plantuml-encoder';
 import { v4 as uuidv4 } from 'uuid';
 import type AwesomeBrainManagerPlugin from '../main';
@@ -12,6 +13,10 @@ export default class Process {
  this.plugin = plugin;
  }
 
+ EmojiProcess: MarkdownPostProcessor = (el: HTMLElement) => {
+ twemoji.parse(el);
+ };
+
  VueProcess = async (source, el, ctx) => {
  const closestLeaf = ctx.containerEl.closest('.workspace-leaf-content') as HTMLElement;
  console.log(source);

src/ui/modal/customModals.ts

@@ -1,6 +1,8 @@
 import type AwesomeBrainManagerPlugin from 'main';
 import { App, FuzzySuggestModal, Modal, Notice, Setting, SuggestModal, TAbstractFile } from 'obsidian';
-import type { Pomodoro } from 'schemas/spaces';
+import { Picker } from 'emoji-mart';
+import data from '@emoji-mart/data';
+import type { Pomodoro } from '../../schemas/spaces';
 import t from '../../i18n';
 
 interface Book {
@@ -99,3 +101,30 @@ export class PomodoroReminderModal extends Modal {
  contentEl.empty();
  }
 }
+
+export class EmojiPickerModal extends Modal {
+ constructor(app: App) {
+ super(app);
+ }
+
+ onSelect = (emoji: any) => {
+ const editor = this.app.workspace.activeEditor?.editor;
+ // BUG 光标问题
+ editor?.replaceRange(emoji.native, editor.getCursor());
+ this.close();
+ };
+
+ async onOpen() {
+ const { contentEl } = this;
+ const pickerOptions = { onEmojiSelect: this.onSelect, data, skin: 1, set: 'native', theme: 'light' };
+ const picker: any = new Picker(pickerOptions);
+ // for style
+ this.modalEl.id = 'emoji-modal';
+ contentEl.appendChild(picker);
+ }
+
+ onClose() {
+ const { contentEl } = this;
+ contentEl.empty();
+ }
+}