react-embed-docs 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/client/components/EmojiPicker.d.ts.map +1 -1
  2. package/dist/client/components/EmojiPicker.js +24 -23
  3. package/dist/client/locales/en.json +2 -0
  4. package/dist/client/locales/ru.json +2 -0
  5. package/package.json +2 -1
package/dist/client/components/EmojiPicker.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/client/components/EmojiPicker.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAqE3E"}
1
+ {"version":3,"file":"EmojiPicker.d.ts","sourceRoot":"","sources":["../../../src/client/components/EmojiPicker.tsx"],"names":[],"mappings":"AAUA,UAAU,gBAAgB;IACxB,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAA;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,gBAAgB,2CAuF3E"}
package/dist/client/components/EmojiPicker.js CHANGED
@@ -1,28 +1,28 @@
1
1
  'use client';
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import EmojiPickerLib, { EmojiStyle, Theme, } from 'emoji-picker-react';
4
+ import { useEffect, useRef, useState } from 'react';
3
5
  import { useTranslation } from '../hooks/useTranslation.js';
4
- import { useState, useRef, useEffect } from 'react';
5
- // Popular emojis for documents
6
- const POPULAR_EMOJIS = [
7
- '📄', '📝', '📊', '📈', '📉', '📑', '📋', '📁', '📂', '🗂️',
8
- '📦', '📮', '📯', '📰', '📱', '💻', '🖥️', '📀', '💿', '📼',
9
- '🌸', '🌺', '🌻', '🌼', '🌷', '🌹', '🌵', '🌲', '🌳', '🌴',
10
- '🍏', '🍎', '🍐', '🍊', '🍋', '🍌', '🍉', '🍇', '🍓', '🫐',
11
- '⚽', '🏀', '🏈', '⚾', '🥎', '🎾', '🏐', '🏉', '🥏', '🎱',
12
- '🚗', '🚕', '🚙', '🚌', '🚎', '🏎️', '🚓', '🚑', '🚒', '🚐',
13
- '❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '❣️',
14
- '⭐', '🌟', '✨', '💫', '⚡', '🔥', '💥', '☄️', '☀️', '🌤️',
15
- '🔴', '🟠', '🟡', '🟢', '🔵', '🟣', '⚫', '⚪', '🟤', '🔘',
16
- '✅', '❌', '⭕', '🚫', '💯', '💢', '♨️', '🚷', '🚯', '🚳',
17
- ];
18
6
  export function EmojiPicker({ value, onChange, className }) {
19
7
  const { t } = useTranslation();
20
8
  const [isOpen, setIsOpen] = useState(false);
9
+ const [theme, setTheme] = useState(Theme.LIGHT);
21
10
  const dropdownRef = useRef(null);
11
+ // Detect dark mode
12
+ useEffect(() => {
13
+ const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
14
+ const updateTheme = () => {
15
+ setTheme(mediaQuery.matches ? Theme.DARK : Theme.LIGHT);
16
+ };
17
+ updateTheme();
18
+ mediaQuery.addEventListener('change', updateTheme);
19
+ return () => mediaQuery.removeEventListener('change', updateTheme);
20
+ }, []);
22
21
  // Close dropdown when clicking outside
23
22
  useEffect(() => {
24
23
  function handleClickOutside(event) {
25
- if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
24
+ if (dropdownRef.current &&
25
+ !dropdownRef.current.contains(event.target)) {
26
26
  setIsOpen(false);
27
27
  }
28
28
  }
@@ -33,18 +33,19 @@ export function EmojiPicker({ value, onChange, className }) {
33
33
  document.removeEventListener('mousedown', handleClickOutside);
34
34
  };
35
35
  }, [isOpen]);
36
+ const handleEmojiClick = (emojiData) => {
37
+ onChange(emojiData.emoji);
38
+ setIsOpen(false);
39
+ };
36
40
  return (_jsxs("div", { ref: dropdownRef, className: "relative", children: [_jsx("button", { onClick: () => setIsOpen(!isOpen), className: [
37
41
  'h-10 w-10 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900',
38
42
  'hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-center text-xl transition-colors',
39
43
  className,
40
- ].join(' '), children: value || '📄' }), isOpen && (_jsxs("div", { className: "absolute top-full left-0 mt-1 z-50 w-64 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg p-2", children: [_jsx("div", { className: "grid grid-cols-8 gap-1", children: POPULAR_EMOJIS.map((emoji) => (_jsx("button", { onClick: () => {
41
- onChange(emoji);
42
- setIsOpen(false);
43
- }, className: [
44
- 'h-8 w-8 rounded hover:bg-gray-100 dark:hover:bg-gray-800 flex items-center justify-center text-lg transition-colors',
45
- value === emoji && 'bg-gray-100 dark:bg-gray-800',
46
- ].join(' '), children: emoji }, emoji))) }), value && (_jsx("button", { onClick: () => {
44
+ ].join(' '), children: value || '📄' }), isOpen && (_jsxs("div", { className: "absolute top-full left-0 mt-1 z-50 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-lg overflow-hidden", children: [_jsx(EmojiPickerLib, { open: true, onEmojiClick: handleEmojiClick, theme: theme, width: 600, height: 400, emojiStyle: EmojiStyle.NATIVE, autoFocusSearch: true, skinTonesDisabled: false, searchPlaceholder: t('emoji.search') || 'Search emoji...', previewConfig: {
45
+ showPreview: true,
46
+ defaultCaption: t('emoji.select') || 'Select an emoji',
47
+ } }), value && (_jsx("button", { onClick: () => {
47
48
  onChange('');
48
49
  setIsOpen(false);
49
- }, className: "mt-2 w-full py-1.5 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded transition-colors", children: t('emoji.remove') }))] }))] }));
50
+ }, className: "w-full py-2 text-sm text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 border-t border-gray-200 dark:border-gray-700 transition-colors", children: t('emoji.remove') }))] }))] }));
50
51
  }
package/dist/client/locales/en.json CHANGED
@@ -10,6 +10,8 @@
10
10
  "breadcrumbs.loading": "Loading...",
11
11
  "breadcrumbs.error": "Error loading path",
12
12
  "emoji.remove": "Remove emoji",
13
+ "emoji.search": "Search emoji...",
14
+ "emoji.select": "Select an emoji",
13
15
  "editor.titlePlaceholder": "Document title",
14
16
  "editor.titleRequired": "Please enter a document title",
15
17
  "editor.slugRequired": "Please enter a document slug",
package/dist/client/locales/ru.json CHANGED
@@ -10,6 +10,8 @@
10
10
  "breadcrumbs.loading": "Загрузка...",
11
11
  "breadcrumbs.error": "Ошибка загрузки пути",
12
12
  "emoji.remove": "Убрать эмодзи",
13
+ "emoji.search": "Поиск эмодзи...",
14
+ "emoji.select": "Выберите эмодзи",
13
15
  "editor.titlePlaceholder": "Название документа",
14
16
  "editor.titleRequired": "Пожалуйста, введите название документа",
15
17
  "editor.slugRequired": "Пожалуйста, введите slug документа",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-embed-docs",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "description": "Full-stack documentation system with BlockNote editor, hierarchical structure, and file uploads",
5
5
  "type": "module",
6
6
  "main": "./dist/server/index.js",
@@ -54,6 +54,7 @@
54
54
  "@dnd-kit/core": "^6.3.1"
55
55
  },
56
56
  "dependencies": {
57
+ "emoji-picker-react": "^4.18.0",
57
58
  "hono": "^4.7.0",
58
59
  "lucide-react": "^0.487.0",
59
60
  "nanoid": "^5.1.5",