Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(admin): update emoji plugin #245

Merged
merged 2 commits into from
Mar 11, 2023
Merged

chore(admin): update emoji plugin #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1714d13
chore(admin): refine emoji plugin
Mister-Hope Mar 8, 2023
826c327
chore: update style file
Mister-Hope Mar 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 68 additions & 66 deletions packages/admin/src/components/Editor/emoji.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,80 @@
import { BytemdPlugin } from 'bytemd';
//@ts-ignore
import data from '@emoji-mart/data';
import data from "@emoji-mart/data";
//@ts-ignore
import i18n from '@emoji-mart/data/i18n/zh.json';
import Picker from '@emoji-mart/react';
import { render } from 'react-dom';
import i18n from "@emoji-mart/data/i18n/zh.json";
import Picker from "@emoji-mart/react";
import { BytemdPlugin } from "bytemd";
import { render } from "react-dom";

const handleClick = (ev: Event) => {
ev.stopPropagation();
ev.preventDefault();
const EMOJI_ICON =
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 1024 1024"><path d="M510.944 960c-247.04 0-448-200.96-448-448s200.992-448 448-448 448 200.96 448 448-200.96 448-448 448zm0-832c-211.744 0-384 172.256-384 384s172.256 384 384 384 384-172.256 384-384-172.256-384-384-384z"/><path d="M512 773.344c-89.184 0-171.904-40.32-226.912-110.624-10.88-13.92-8.448-34.016 5.472-44.896 13.888-10.912 34.016-8.48 44.928 5.472 42.784 54.688 107.136 86.048 176.512 86.048 70.112 0 134.88-31.904 177.664-87.552 10.784-14.016 30.848-16.672 44.864-5.888 14.016 10.784 16.672 30.88 5.888 44.864C685.408 732.32 602.144 773.344 512 773.344zM368 515.2c-26.528 0-48-21.472-48-48v-64c0-26.528 21.472-48 48-48s48 21.472 48 48v64c0 26.496-21.504 48-48 48zm288 0c-26.496 0-48-21.472-48-48v-64c0-26.528 21.504-48 48-48s48 21.472 48 48v64c0 26.496-21.504 48-48 48z"/></svg>';

const el = document.querySelector('.emoji-container');
const e = ev || window.event;
const elem = e.target as any;
if (el && !el.contains(elem)) {
const handleClick = (event: Event) => {
event.stopPropagation();
event.preventDefault();

const el = document.querySelector(".emoji-container");

if (el && !el.contains(event.target as HTMLElement)) {
// ev.target
// 关了应该

el.className = 'emoji-container hiden';
document.removeEventListener('click', handleClick);
el.className = "emoji-container hidden";
document.removeEventListener("click", handleClick);
}
};

export function emoji(): BytemdPlugin {
return {
editorEffect: (ctx) => {
const el = (
//@ts-ignore
<Picker
i18n={i18n}
data={data}
onEmojiSelect={(c) => {
if (c?.native) {
ctx.editor.replaceSelection(c?.native);
}
}}
/>
);
const container = ctx.root.querySelector('.bytemd-toolbar-left');
const targetEl = document.createElement('div');
targetEl.className = 'emoji-container hiden';
// 获取一下 left 的位置
const actionEl = ctx.root.querySelector(`div[bytemd-tippy-path="18"]`) as any;
if (actionEl) {
targetEl.style.left = `${actionEl.offsetLeft}px`;
}
container.appendChild(targetEl);
if (container) {
render(el, targetEl);
}
},
actions: [
{
title: '表情',
icon: icon, // 16x16 SVG icon
handler: {
type: 'action',
click: ({ codemirror, editor, root }) => {
const el = root.querySelector('.emoji-container');
if (el.classList.contains('hiden')) {
// 显示的话点击外面就关闭
setTimeout(() => {
document.addEventListener('click', handleClick);
}, 100);
} else {
document.removeEventListener('click', handleClick);
}
if (el) {
el.classList.toggle('hiden');
}
},
export const emoji = (): BytemdPlugin => ({
editorEffect: (ctx) => {
const el = (
// @ts-ignore
<Picker
i18n={i18n}
data={data}
onEmojiSelect={(c) => {
if (c?.native) {
ctx.editor.replaceSelection(c?.native);
}
}}
/>
);
const container = ctx.root.querySelector(".bytemd-toolbar-left");
const targetEl = document.createElement("div");
targetEl.className = "emoji-container hidden";
// 获取一下 left 的位置
const actionEl = ctx.root.querySelector(
`div[bytemd-tippy-path="18"]`
) as any;
if (actionEl) {
targetEl.style.left = `${actionEl.offsetLeft}px`;
}
container.appendChild(targetEl);
if (container) {
render(el, targetEl);
}
},
actions: [
{
title: "表情",
icon: EMOJI_ICON,
handler: {
type: "action",
click: ({ root }) => {
const el = root.querySelector(".emoji-container");

if (el.classList.contains("hidden")) {
// 显示的话点击外面就关闭
setTimeout(() => {
document.addEventListener("click", handleClick);
}, 100);
} else {
document.removeEventListener("click", handleClick);
}
if (el) {
el.classList.toggle("hidden");
}
},
},
],
};
}
const icon = `<svg fill="currentColor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2631" width="16" height="16"><path d="M510.944 960c-247.04 0-448-200.96-448-448s200.992-448 448-448 448 200.96 448 448-200.96 448-448 448z m0-832c-211.744 0-384 172.256-384 384s172.256 384 384 384 384-172.256 384-384-172.256-384-384-384z" fill="" p-id="2632"></path><path d="M512 773.344c-89.184 0-171.904-40.32-226.912-110.624-10.88-13.92-8.448-34.016 5.472-44.896 13.888-10.912 34.016-8.48 44.928 5.472 42.784 54.688 107.136 86.048 176.512 86.048 70.112 0 134.88-31.904 177.664-87.552 10.784-14.016 30.848-16.672 44.864-5.888 14.016 10.784 16.672 30.88 5.888 44.864C685.408 732.32 602.144 773.344 512 773.344zM368 515.2c-26.528 0-48-21.472-48-48v-64c0-26.528 21.472-48 48-48s48 21.472 48 48v64c0 26.496-21.504 48-48 48zM656 515.2c-26.496 0-48-21.472-48-48v-64c0-26.528 21.504-48 48-48s48 21.472 48 48v64c0 26.496-21.504 48-48 48z" fill="" p-id="2633"></path></svg>`;
},
],
});
2 changes: 1 addition & 1 deletion packages/admin/src/components/Editor/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ body .markdown-body .custom-container .relative > pre {
left: 0;
z-index: 999;
}
.bytemd-toolbar-left .hiden {
.bytemd-toolbar-left .hidden {
display: none;
}
body .emoji-categories {
Expand Down