ckeditor-math-chem-editor 1.0.0

package/src/SpecialCharacterModal.css

@@ -0,0 +1,140 @@
+/* ============================================================
+   Special Character Modal — MathType Style
+   ============================================================ */
+
+.scm-overlay { position: fixed; inset: 0; z-index: 100000; }
+
+.scm-modal {
+  position: absolute;
+  width: 270px;
+  height: 274px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid #8fa4b3;
+  border-radius: 4px;
+  background: linear-gradient(180deg, #e3ebf1 0%, #d0dbe4 100%);
+  box-shadow: 0 12px 28px rgba(15, 26, 35, 0.28);
+  font-family: "Segoe UI", Tahoma, sans-serif;
+}
+
+.scm-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  background: linear-gradient(180deg, #e8eef3 0%, #d8e2ea 100%);
+  border-bottom: 1px solid #a3b4c0;
+  box-sizing: border-box;
+}
+
+.scm-code-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: #6d88a2;
+  flex-shrink: 0;
+}
+
+.scm-code-input {
+  width: 68px;
+  height: 21px;
+  border: 1px solid #657887;
+  border-radius: 8px;
+  font-size: 11px;
+  outline: none;
+  box-sizing: border-box;
+  background: #fdfefe;
+  color: #22343d;
+  padding: 0 7px;
+}
+
+.scm-code-input:focus {
+  border-color: #597086;
+  box-shadow: 0 0 0 2px rgba(125, 152, 170, 0.18);
+}
+
+.scm-category-select {
+  flex: 1;
+  height: 21px;
+  min-width: 96px;
+  padding: 0 7px;
+  border: 1px solid #657887;
+  border-radius: 8px;
+  font-size: 11px;
+  font-weight: 600;
+  outline: none;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #ffffff 0%, #edf1f4 100%);
+  color: #22343d;
+}
+
+.scm-category-select:focus {
+  border-color: #597086;
+  box-shadow: 0 0 0 2px rgba(125, 152, 170, 0.18);
+}
+
+.scm-category-select option {
+  background: #f6f8fa;
+  color: #22343d;
+}
+
+.scm-body {
+  flex: 1;
+  padding: 8px 8px 10px;
+  overflow: hidden;
+  background: linear-gradient(180deg, #d9e2e8 0%, #c9d5de 100%);
+}
+
+.scm-grid-container {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 0;
+  border: 1px solid #b2bdc6;
+  background: #f7f8fa;
+}
+
+.scm-grid-container::-webkit-scrollbar { width: 16px; }
+.scm-grid-container::-webkit-scrollbar-track { background: #3d4044; }
+.scm-grid-container::-webkit-scrollbar-thumb { background: #a8adb3; border-radius: 8px; border: 3px solid #3d4044; }
+.scm-grid-container::-webkit-scrollbar-thumb:hover { background: #bcc2c7; }
+
+.scm-category-group {
+  width: 100%;
+}
+
+.scm-char-grid {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 0;
+}
+
+.scm-char-btn {
+  height: 24px;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 1px solid #d0d5da;
+  border-right: none;
+  border-bottom: none;
+  border-radius: 0;
+  background: #fbfbfc;
+  color: #6f89a3;
+  font-size: 17px;
+  cursor: pointer;
+  transition: background 0.1s, color 0.1s;
+}
+
+.scm-char-btn:hover {
+  background: #eef4f8;
+  color: #38566f;
+}
+
+.scm-no-results {
+  text-align: center;
+  padding: 22px 10px;
+  color: #6b7f90;
+  font-size: 12px;
+}

package/src/SpecialCharacterModal.jsx

@@ -0,0 +1,158 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import './SpecialCharacterModal.css';
+
+const CATEGORIES = [
+  { id: 'All', name: 'All' },
+  { id: 'Symbol', name: 'Symbol', ranges: [[0x2200, 0x22FF], [0x2600, 0x26FF], [0x2190, 0x21FF], [0x2700, 0x27BF]] },
+  { id: 'Punctuation', name: 'Punctuation', ranges: [[0x0021, 0x002F], [0x003A, 0x0040], [0x005B, 0x0060], [0x007B, 0x007E], [0x2010, 0x2027], [0x2030, 0x205E], [0x2E00, 0x2E7F]] },
+  { id: 'Letter', name: 'Letter', ranges: [[0x0041, 0x005A], [0x0061, 0x007A], [0x0370, 0x03FF], [0x0400, 0x04FF]] },
+  { id: 'Mark', name: 'Mark', ranges: [[0x0300, 0x036F], [0x20D0, 0x20FF]] },
+  { id: 'Number', name: 'Number', ranges: [[0x0030, 0x0039], [0x2150, 0x218F], [0x2070, 0x209F]] },
+  { id: 'Phonetic', name: 'Phonetic', ranges: [[0x0250, 0x02AF], [0x1D00, 0x1D7F]] },
+  { id: 'Other', name: 'Other', ranges: [[0x20A0, 0x20CF], [0x2100, 0x214F], [0x25A0, 0x25FF]] }
+];
+
+const generateCharacters = () => {
+  const chars = [];
+  CATEGORIES.slice(1).forEach(cat => {
+    cat.ranges.forEach(range => {
+      for (let i = range[0]; i <= range[1]; i++) {
+        if (i >= 0x007F && i <= 0x009F) continue;
+        chars.push({
+          code: i.toString(16).toUpperCase().padStart(4, '0'),
+          char: String.fromCodePoint(i),
+          category: cat.id
+        });
+      }
+    });
+  });
+  return chars;
+};
+
+const ALL_CHARACTERS = generateCharacters();
+
+export default function SpecialCharacterModal({ isOpen, onClose, onInsert, position, contained = false }) {
+  const [searchCode, setSearchCode] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All');
+
+  useEffect(() => {
+    if (isOpen) {
+      setSearchCode('');
+      setSelectedCategory('All');
+    }
+  }, [isOpen]);
+
+  const filteredCharacters = useMemo(() => {
+    let filtered = ALL_CHARACTERS;
+    if (selectedCategory !== 'All') {
+      filtered = filtered.filter(c => c.category === selectedCategory);
+    }
+    if (searchCode.trim()) {
+      const codeUpper = searchCode.trim().toUpperCase();
+      filtered = filtered.filter(c => c.code.includes(codeUpper));
+    }
+    return filtered;
+  }, [selectedCategory, searchCode]);
+
+  const groupedCharacters = useMemo(() => {
+    if (selectedCategory !== 'All' && !searchCode.trim()) {
+      return { [selectedCategory]: filteredCharacters };
+    }
+    
+    const groups = {};
+    filteredCharacters.forEach(c => {
+      if (!groups[c.category]) groups[c.category] = [];
+      groups[c.category].push(c);
+    });
+    return groups;
+  }, [filteredCharacters, selectedCategory, searchCode]);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      onClose();
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  let modalStyle = { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' };
+  if (position) {
+    let x = position.x;
+    let y = position.y;
+
+    if (!contained) {
+      x -= 120; // Shift left so it aligns better under the button
+
+      if (x < 10) {
+        x = 10;
+      }
+      if (x + 230 > window.innerWidth) {
+        x = window.innerWidth - 240;
+      }
+      if (y + 200 > window.innerHeight) {
+        y = window.innerHeight - 210;
+      }
+    }
+
+    modalStyle = { top: `${y}px`, left: `${x}px` };
+  }
+
+  return (
+    <div
+      className={`scm-overlay${contained ? ' scm-overlay--contained' : ''}`}
+      onMouseDown={(e) => { e.stopPropagation(); onClose(); }}
+    >
+      <div className="scm-modal" style={modalStyle} onMouseDown={(e) => e.stopPropagation()}>
+        <div className="scm-toolbar">
+          <input
+            type="text"
+            placeholder="Code"
+            value={searchCode}
+            onChange={(e) => setSearchCode(e.target.value)}
+            className="scm-code-input"
+          />
+          <select
+            value={selectedCategory}
+            onChange={(e) => setSelectedCategory(e.target.value)}
+            className="scm-category-select"
+          >
+            {CATEGORIES.map(cat => (
+              <option key={cat.id} value={cat.id}>{cat.name}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="scm-body">
+          <div className="scm-grid-container">
+            {Object.entries(groupedCharacters).map(([catName, chars]) => (
+              <div key={catName} className="scm-category-group">
+                <div className="scm-char-grid">
+                  {chars.map(c => (
+                    <button
+                      key={c.code}
+                      className="scm-char-btn"
+                      onClick={() => { onInsert(c.char); onClose(); }}
+                      title={`U+${c.code}`}
+                    >
+                      {c.char}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            ))}
+            {filteredCharacters.length === 0 && (
+              <div className="scm-no-results">No characters found.</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/index.js

@@ -0,0 +1 @@
+export { default } from './Ckeditor.jsx';