WebOrbiton
v3.0.0.2

FlatlyPage

← Changes All versions
840 lines · 27.8 KB
  1. (function () {
  2. const style = document.createElement('style');
  3. style.textContent = `
  4. .sas-floating-toolbar {
  5. position: absolute;
  6. background: linear-gradient(135deg, rgba(30, 30, 35, 0.98), rgba(20, 20, 25, 0.98));
  7. backdrop-filter: blur(20px) saturate(180%);
  8. -webkit-backdrop-filter: blur(20px) saturate(180%);
  9. border: 1px solid rgba(255, 255, 255, 0.18);
  10. border-radius: 14px;
  11. padding: 6px;
  12. display: flex;
  13. gap: 3px;
  14. z-index: 100000;
  15. box-shadow:
  16. 0 8px 32px rgba(0, 0, 0, 0.4),
  17. 0 2px 8px rgba(0, 0, 0, 0.2),
  18. inset 0 1px 0 rgba(255, 255, 255, 0.1);
  19. opacity: 0;
  20. visibility: hidden;
  21. transform: translateY(12px) scale(0.92);
  22. transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  23. pointer-events: none;
  24. font-family: var(--font-interface, 'Space Grotesk'), -apple-system, BlinkMacSystemFont, sans-serif;
  25. }
  27. .sas-floating-toolbar.active {
  28. opacity: 1;
  29. visibility: visible;
  30. transform: translateY(0) scale(1);
  31. pointer-events: all;
  32. animation: toolbarEntrance 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  33. }
  35. @keyframes toolbarEntrance {
  36. 0% {
  37. opacity: 0;
  38. transform: translateY(12px) scale(0.92);
  39. }
  40. 60% {
  41. transform: translateY(-2px) scale(1.02);
  42. }
  43. 100% {
  44. opacity: 1;
  45. transform: translateY(0) scale(1);
  46. }
  47. }
  49. .sas-floating-toolbar button {
  50. position: relative;
  51. background: rgba(255, 255, 255, 0.05);
  52. border: 1px solid rgba(255, 255, 255, 0.08);
  53. color: rgba(255, 255, 255, 0.85);
  54. width: 38px;
  55. height: 38px;
  56. cursor: pointer;
  57. border-radius: 10px;
  58. display: flex;
  59. align-items: center;
  60. justify-content: center;
  61. transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  62. overflow: hidden;
  63. padding: 0;
  64. }
  66. .sas-floating-toolbar button.format-active {
  67. background: rgba(96, 165, 250, 0.25);
  68. border-color: rgba(96, 165, 250, 0.5);
  69. color: #60a5fa;
  70. box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.15);
  71. }
  73. .sas-floating-toolbar button.format-active::after {
  74. content: '';
  75. position: absolute;
  76. top: 3px;
  77. right: 3px;
  78. width: 6px;
  79. height: 6px;
  80. background: #60a5fa;
  81. border-radius: 50%;
  82. box-shadow: 0 0 8px rgba(96, 165, 250, 0.8);
  83. animation: pulse 2s infinite;
  84. }
  86. @keyframes pulse {
  87. 0%, 100% { opacity: 1; transform: scale(1); }
  88. 50% { opacity: 0.6; transform: scale(0.9); }
  89. }
  91. .sas-floating-toolbar button svg {
  92. width: 18px;
  93. height: 18px;
  94. transition: all 0.2s;
  95. }
  97. .sas-floating-toolbar button::before {
  98. content: '';
  99. position: absolute;
  100. top: 50%;
  101. left: 50%;
  102. width: 0;
  103. height: 0;
  104. border-radius: 50%;
  105. background: rgba(255, 255, 255, 0.15);
  106. transform: translate(-50%, -50%);
  107. transition: width 0.4s, height 0.4s;
  108. }
  110. .sas-floating-toolbar button:hover {
  111. background: rgba(255, 255, 255, 0.12);
  112. border-color: rgba(255, 255, 255, 0.2);
  113. color: #ffffff;
  114. transform: translateY(-1px);
  115. box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  116. }
  118. .sas-floating-toolbar button.format-active:hover {
  119. background: rgba(96, 165, 250, 0.35);
  120. border-color: rgba(96, 165, 250, 0.6);
  121. }
  123. .sas-floating-toolbar button:hover svg {
  124. transform: scale(1.1);
  125. }
  127. .sas-floating-toolbar button:active::before {
  128. width: 100px;
  129. height: 100px;
  130. }
  132. .sas-floating-toolbar button:active {
  133. transform: scale(0.95);
  134. }
  136. .sas-floating-toolbar .divider {
  137. width: 1px;
  138. background: linear-gradient(
  139. to bottom,
  140. rgba(255, 255, 255, 0),
  141. rgba(255, 255, 255, 0.15),
  142. rgba(255, 255, 255, 0)
  143. );
  144. margin: 8px 4px;
  145. align-self: stretch;
  146. }
  148. .sas-floating-toolbar::after {
  149. content: '';
  150. position: absolute;
  151. bottom: -7px;
  152. left: 50%;
  153. transform: translateX(-50%);
  154. border-left: 7px solid transparent;
  155. border-right: 7px solid transparent;
  156. border-top: 7px solid rgba(30, 30, 35, 0.98);
  157. filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  158. }
  160. .sas-floating-toolbar.arrow-left::after {
  161. left: 20px;
  162. transform: translateX(0);
  163. }
  165. .sas-floating-toolbar.arrow-right::after {
  166. left: auto;
  167. right: 20px;
  168. transform: translateX(0);
  169. }
  171. .sas-floating-toolbar button .tooltip {
  172. position: absolute;
  173. bottom: -36px;
  174. left: 50%;
  175. transform: translateX(-50%);
  176. background: rgba(0, 0, 0, 0.95);
  177. color: white;
  178. padding: 6px 10px;
  179. border-radius: 6px;
  180. font-size: 11px;
  181. font-weight: 500;
  182. white-space: nowrap;
  183. pointer-events: none;
  184. opacity: 0;
  185. transition: opacity 0.2s;
  186. z-index: 1;
  187. }
  189. .sas-floating-toolbar button:hover .tooltip {
  190. opacity: 1;
  191. animation: tooltipFade 0.2s ease;
  192. }
  194. .sas-floating-toolbar button .tooltip.with-shortcut {
  195. display: flex;
  196. gap: 8px;
  197. align-items: center;
  198. }
  200. .sas-floating-toolbar button .tooltip .shortcut {
  201. background: rgba(255, 255, 255, 0.15);
  202. padding: 2px 5px;
  203. border-radius: 3px;
  204. font-size: 10px;
  205. font-family: monospace;
  206. }
  208. @keyframes tooltipFade {
  209. from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  210. to { opacity: 1; transform: translateX(-50%) translateY(0); }
  211. }
  213. .sas-toolbar-status {
  214. position: fixed;
  215. bottom: 20px;
  216. right: 20px;
  217. background: rgba(0, 0, 0, 0.9);
  218. color: white;
  219. padding: 8px 14px;
  220. border-radius: 8px;
  221. font-size: 12px;
  222. font-family: var(--font-interface, 'Space Grotesk'), -apple-system, BlinkMacSystemFont, sans-serif;
  223. z-index: 99999;
  224. opacity: 0;
  225. transform: translateY(10px);
  226. transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  227. pointer-events: none;
  228. }
  230. .sas-toolbar-status.show {
  231. opacity: 1;
  232. transform: translateY(0);
  233. }
  235. .sas-toolbar-status.success {
  236. background: rgba(16, 185, 129, 0.95);
  237. }
  239. .sas-toolbar-status.removed {
  240. background: rgba(239, 68, 68, 0.95);
  241. }
  242. `;
  243. document.head.appendChild(style);
  244. ​
  245. const icons = {
  246. bold: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  247. <path d="M6 4h8a4 4 0 0 1 0 8H6z"/>
  248. <path d="M6 12h9a4 4 0 0 1 0 8H6z"/>
  249. </svg>`,
  250. ​
  251. italic: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  252. <line x1="19" y1="4" x2="10" y2="4"/>
  253. <line x1="14" y1="20" x2="5" y2="20"/>
  254. <line x1="15" y1="4" x2="9" y2="20"/>
  255. </svg>`,
  256. ​
  257. underline: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  258. <path d="M6 3v7a6 6 0 0 0 12 0V3"/>
  259. <line x1="4" y1="21" x2="20" y2="21"/>
  260. </svg>`,
  261. ​
  262. strikethrough: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  263. <path d="M16 4H9a3 3 0 0 0-2.83 4"/>
  264. <path d="M14 12a4 4 0 0 1 0 8H6"/>
  265. <line x1="4" y1="12" x2="20" y2="12"/>
  266. </svg>`,
  267. ​
  268. quote: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  269. <path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/>
  270. <path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/>
  271. </svg>`,
  272. ​
  273. undo: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  274. <polyline points="1 4 1 10 7 10"/>
  275. <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>
  276. /svg>`,
  277. ​
  278. redo: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  279. <polyline points="23 4 23 10 17 10"/>
  280. <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/>
  281. </svg>`
  282. };
  284. const toolbar = document.createElement('div');
  285. toolbar.className = 'sas-floating-toolbar';
  287. const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  288. const modKey = isMac ? '⌘' : 'Ctrl';
  290. toolbar.innerHTML = `
  291. <button data-tag="b">
  292. ${icons.bold}
  293. <span class="tooltip with-shortcut">
  294. <span>Bold</span>
  295. <span class="shortcut">${modKey}+B</span>
  296. </span>
  297. </button>
  298. <button data-tag="i">
  299. ${icons.italic}
  300. <span class="tooltip with-shortcut">
  301. <span>Italic</span>
  302. <span class="shortcut">${modKey}+I</span>
  303. </span>
  304. </button>
  305. <div class="divider"></div>
  306. <button data-tag="u">
  307. ${icons.underline}
  308. <span class="tooltip with-shortcut">
  309. <span>Underline</span>
  310. <span class="shortcut">${modKey}+U</span>
  311. </span>
  312. </button>
  313. <button data-tag="s">
  314. ${icons.strikethrough}
  315. <span class="tooltip">
  316. <span>Strikethrough</span>
  317. </span>
  318. </button>
  319. <div class="divider"></div>
  320. <button data-tag="quote">
  321. ${icons.quote}
  322. <span class="tooltip">
  323. <span>Quote</span>
  324. </span>
  325. </button>
  326. <div class="divider"></div>
  327. <button data-action="undo">
  328. ${icons.undo}
  329. <span class="tooltip with-shortcut">
  330. <span>Undo</span>
  331. <span class="shortcut">${modKey}+Z</span>
  332. </span>
  333. </button>
  334. <button data-action="redo">
  335. ${icons.redo}
  336. <span class="tooltip with-shortcut">
  337. <span>Redo</span>
  338. <span class="shortcut">${modKey}+${isMac ? '⇧+Z' : 'Y'}</span>
  339. </span>
  340. </button>
  341. `;
  342. document.body.appendChild(toolbar);
  343. ​
  344. const statusDiv = document.createElement('div');
  345. statusDiv.className = 'sas-toolbar-status';
  346. document.body.appendChild(statusDiv);
  347. ​
  348. const isRichField = (element) => !!element && !!element.dataset && element.dataset.rich === '1' &&
  349. (element.tagName === 'TEXTAREA' || (element.tagName === 'INPUT' && element.type === 'text'));
  350. ​
  351. let activeInput = null;
  352. let hideTimeout = null;
  353. let statusTimeout = null;
  354. let undoStack = new Map();
  355. let isUndoRedo = false;
  356. ​
  357. const showStatus = (message, type = 'success') => {
  358. clearTimeout(statusTimeout);
  359. statusDiv.textContent = message;
  360. statusDiv.className = `sas-toolbar-status show ${type}`;
  362. statusTimeout = setTimeout(() => {
  363. statusDiv.classList.remove('show');
  364. }, 2000);
  365. };
  366. ​
  367. const getInputHistory = (input) => {
  368. if (!undoStack.has(input)) {
  369. undoStack.set(input, {
  370. history: [{
  371. value: input.value,
  372. start: input.selectionStart,
  373. end: input.selectionEnd
  374. }],
  375. position: 0
  376. });
  377. }
  378. return undoStack.get(input);
  379. };
  380. ​
  381. const saveToHistory = (input) => {
  382. if (isUndoRedo) return;
  384. const history = getInputHistory(input);
  385. const currentValue = input.value;
  386. const lastEntry = history.history[history.position];
  388. if (lastEntry && lastEntry.value === currentValue) return;
  390. history.history = history.history.slice(0, history.position + 1);
  392. history.history.push({
  393. value: currentValue,
  394. start: input.selectionStart,
  395. end: input.selectionEnd
  396. });
  398. if (history.history.length > 100) {
  399. history.history.shift();
  400. } else {
  401. history.position++;
  402. }
  403. };
  404. ​
  405. const performUndo = () => {
  406. if (!activeInput) return;
  408. const history = getInputHistory(activeInput);
  410. if (history.position <= 0) {
  411. showStatus('Nothing to undo', 'removed');
  412. return;
  413. }
  415. isUndoRedo = true;
  417. history.position--;
  418. const state = history.history[history.position];
  420. activeInput.value = state.value;
  421. activeInput.setSelectionRange(state.start, state.end);
  423. activeInput.dispatchEvent(new Event('input', { bubbles: true }));
  424. activeInput.dispatchEvent(new Event('change', { bubbles: true }));
  426. setTimeout(() => {
  427. isUndoRedo = false;
  428. }, 50);
  430. showStatus('Undo', 'removed');
  431. updateButtonStates();
  432. };
  433. ​
  434. const performRedo = () => {
  435. if (!activeInput) return;
  437. const history = getInputHistory(activeInput);
  439. if (history.position >= history.history.length - 1) {
  440. showStatus('Nothing to redo', 'removed');
  441. return;
  442. }
  444. isUndoRedo = true;
  446. history.position++;
  447. const state = history.history[history.position];
  449. activeInput.value = state.value;
  450. activeInput.setSelectionRange(state.start, state.end);
  452. activeInput.dispatchEvent(new Event('input', { bubbles: true }));
  453. activeInput.dispatchEvent(new Event('change', { bubbles: true }));
  455. setTimeout(() => {
  456. isUndoRedo = false;
  457. }, 50);
  459. showStatus('Redo', 'success');
  460. updateButtonStates();
  461. };
  462. ​
  463. const detectActiveTags = (text, start, end) => {
  464. const selectedText = text.substring(start, end);
  465. const activeTags = new Set();
  467. const tags = ['b', 'i', 'u', 's', 'quote'];
  469. for (const tag of tags) {
  470. const openTag = `[${tag}]`;
  471. const closeTag = `[/${tag}]`;
  473. if (selectedText.startsWith(openTag) && selectedText.endsWith(closeTag)) {
  474. activeTags.add(tag);
  475. }
  477. const beforeSelection = text.substring(0, start);
  478. const afterSelection = text.substring(end);
  480. const openBefore = (beforeSelection.match(new RegExp(`\\[${tag}\\]`, 'g')) || []).length;
  481. const closeBefore = (beforeSelection.match(new RegExp(`\\[/${tag}\\]`, 'g')) || []).length;
  483. if (openBefore > closeBefore) {
  484. if (afterSelection.includes(closeTag)) {
  485. activeTags.add(tag);
  486. }
  487. }
  488. }
  490. return activeTags;
  491. };
  492. ​
  493. const updateButtonStates = () => {
  494. if (!activeInput) return;
  496. const start = activeInput.selectionStart;
  497. const end = activeInput.selectionEnd;
  498. const value = activeInput.value;
  500. const activeTags = detectActiveTags(value, start, end);
  502. toolbar.querySelectorAll('button[data-tag]').forEach(btn => {
  503. if (activeTags.has(btn.dataset.tag)) {
  504. btn.classList.add('format-active');
  505. } else {
  506. btn.classList.remove('format-active');
  507. }
  508. });
  509. };
  510. ​
  511. const formatText = (tag) => {
  512. if (!activeInput) return;
  513. ​
  514. const start = activeInput.selectionStart;
  515. const end = activeInput.selectionEnd;
  516. const value = activeInput.value;
  517. const selectedText = value.substring(start, end);
  518. ​
  519. if (!selectedText) return;
  520. ​
  521. saveToHistory(activeInput);
  522. ​
  523. const openTag = `[${tag}]`;
  524. const closeTag = `[/${tag}]`;
  525. ​
  526. let replacement;
  527. let newSelectionStart, newSelectionEnd;
  528. let action = 'added';
  529. ​
  530. if (selectedText.startsWith(openTag) && selectedText.endsWith(closeTag)) {
  531. replacement = selectedText.substring(openTag.length, selectedText.length - closeTag.length);
  532. newSelectionStart = start;
  533. newSelectionEnd = start + replacement.length;
  534. action = 'removed';
  535. }
  536. else {
  537. const beforeSelection = value.substring(0, start);
  538. const afterSelection = value.substring(end);
  540. const tagJustBefore = beforeSelection.endsWith(openTag);
  541. const tagJustAfter = afterSelection.startsWith(closeTag);
  543. if (tagJustBefore && tagJustAfter) {
  544. const newValue =
  545. beforeSelection.substring(0, beforeSelection.length - openTag.length) +
  546. selectedText +
  547. afterSelection.substring(closeTag.length);
  549. activeInput.value = newValue;
  550. newSelectionStart = start - openTag.length;
  551. newSelectionEnd = end - openTag.length;
  552. action = 'removed';
  554. activeInput.setSelectionRange(newSelectionStart, newSelectionEnd);
  555. activeInput.dispatchEvent(new Event('input', { bubbles: true }));
  556. activeInput.dispatchEvent(new Event('change', { bubbles: true }));
  558. updateButtonStates();
  559. showStatus(`${tag.toUpperCase()} formatting removed`, 'removed');
  560. return;
  561. }
  563. let searchStart = start;
  565. while (searchStart < end) {
  566. const segmentStart = value.indexOf(openTag, searchStart);
  567. if (segmentStart === -1 || segmentStart >= end) break;
  569. const segmentEnd = value.indexOf(closeTag, segmentStart);
  570. if (segmentEnd === -1 || segmentEnd > end) break;
  572. const beforeTag = value.substring(0, start);
  573. const afterTag = value.substring(end);
  574. let middlePart = selectedText;
  576. const tagRegex = new RegExp(`\\[${tag}\\]([\\s\\S]*?)\\[/${tag}\\]`, 'g');
  577. middlePart = middlePart.replace(tagRegex, '$1');
  579. middlePart = middlePart.replace(new RegExp(`\\[${tag}\\]`, 'g'), '');
  580. middlePart = middlePart.replace(new RegExp(`\\[/${tag}\\]`, 'g'), '');
  582. activeInput.value = beforeTag + middlePart + afterTag;
  583. newSelectionStart = start;
  584. newSelectionEnd = start + middlePart.length;
  585. action = 'removed';
  587. activeInput.setSelectionRange(newSelectionStart, newSelectionEnd);
  588. activeInput.dispatchEvent(new Event('input', { bubbles: true }));
  589. activeInput.dispatchEvent(new Event('change', { bubbles: true }));
  591. updateButtonStates();
  592. showStatus(`${tag.toUpperCase()} formatting removed`, 'removed');
  593. return;
  594. }
  596. replacement = openTag + selectedText + closeTag;
  597. newSelectionStart = start;
  598. newSelectionEnd = end + openTag.length + closeTag.length;
  599. action = 'added';
  600. }
  601. ​
  602. const scrollTop = activeInput.scrollTop;
  603. ​
  604. activeInput.focus();
  605. activeInput.setSelectionRange(start, end);
  606. document.execCommand('insertText', false, replacement);
  607. ​
  608. activeInput.setSelectionRange(newSelectionStart, newSelectionEnd);
  609. activeInput.scrollTop = scrollTop;
  610. ​
  611. activeInput.dispatchEvent(new Event('input', { bubbles: true }));
  612. activeInput.dispatchEvent(new Event('change', { bubbles: true }));
  614. saveToHistory(activeInput);
  616. updateButtonStates();
  618. const actionText = action === 'added' ? 'applied' : 'removed';
  619. const statusType = action === 'added' ? 'success' : 'removed';
  620. showStatus(`${tag.toUpperCase()} formatting ${actionText}`, statusType);
  621. };
  622. ​
  623. const positionToolbar = (x, y) => {
  624. const toolbarWidth = toolbar.offsetWidth;
  625. const toolbarHeight = toolbar.offsetHeight;
  626. const padding = 12;
  627. const arrowOffset = 18;
  628. ​
  629. let left = x - (toolbarWidth / 2);
  630. let top = y - toolbarHeight - arrowOffset;
  631. ​
  632. const viewportWidth = window.innerWidth;
  633. const scrollTop = window.pageYOffset;
  634. ​
  635. toolbar.classList.remove('arrow-left', 'arrow-right');
  636. ​
  637. if (left < padding) {
  638. left = padding;
  639. toolbar.classList.add('arrow-left');
  640. } else if (left + toolbarWidth > viewportWidth - padding) {
  641. left = viewportWidth - toolbarWidth - padding;
  642. toolbar.classList.add('arrow-right');
  643. }
  644. ​
  645. if (top < scrollTop + padding) {
  646. top = y + arrowOffset;
  647. }
  648. ​
  649. toolbar.style.left = `${left}px`;
  650. toolbar.style.top = `${top}px`;
  651. };
  652. ​
  653. const showToolbar = () => {
  654. clearTimeout(hideTimeout);
  655. toolbar.classList.add('active');
  656. updateButtonStates();
  657. };
  658. ​
  659. const hideToolbar = (immediate = false) => {
  660. clearTimeout(hideTimeout);
  661. if (immediate) {
  662. toolbar.classList.remove('active');
  663. } else {
  664. hideTimeout = setTimeout(() => {
  665. toolbar.classList.remove('active');
  666. }, 100);
  667. }
  668. };
  669. ​
  670. let selectionTimeout;
  671. ​
  672. const handleSelection = (e) => {
  673. clearTimeout(selectionTimeout);
  674. ​
  675. selectionTimeout = setTimeout(() => {
  676. const isTextInput = isRichField(e.target);
  677. ​
  678. if (!isTextInput) {
  679. if (!e.target.closest('.sas-floating-toolbar')) {
  680. hideToolbar(true);
  681. }
  682. return;
  683. }
  684. ​
  685. const start = e.target.selectionStart;
  686. const end = e.target.selectionEnd;
  687. const hasSelection = start !== end;
  688. ​
  689. if (hasSelection) {
  690. activeInput = e.target;
  692. const rect = e.target.getBoundingClientRect();
  693. const x = e.pageX || (rect.left + rect.width / 2);
  694. const y = e.pageY || (rect.top + window.pageYOffset);
  696. positionToolbar(x, y);
  697. showToolbar();
  698. } else {
  699. if (!e.target.closest('.sas-floating-toolbar')) {
  700. hideToolbar(true);
  701. }
  702. }
  703. }, 10);
  704. };
  705. ​
  706. document.addEventListener('mouseup', handleSelection);
  707. ​
  708. document.addEventListener('focus', (e) => {
  709. const isTextInput = isRichField(e.target);
  711. if (isTextInput) {
  712. activeInput = e.target;
  713. if (!undoStack.has(e.target)) {
  714. getInputHistory(e.target);
  715. }
  716. }
  717. }, true);
  718. ​
  719. document.addEventListener('input', (e) => {
  720. const isTextInput = isRichField(e.target);
  722. if (isTextInput && !isUndoRedo) {
  723. saveToHistory(e.target);
  724. }
  725. });
  726. ​
  727. document.addEventListener('keyup', (e) => {
  728. if (e.shiftKey) {
  729. const target = document.activeElement;
  730. const isTextInput = isRichField(target);
  732. if (isTextInput && target.selectionStart !== target.selectionEnd) {
  733. activeInput = target;
  734. const rect = target.getBoundingClientRect();
  735. positionToolbar(
  736. rect.left + rect.width / 2,
  737. rect.top + window.pageYOffset
  738. );
  739. showToolbar();
  740. }
  741. }
  742. });
  743. ​
  744. document.addEventListener('contextmenu', (e) => {
  745. const isTextInput = isRichField(e.target);
  746. ​
  747. if (isTextInput) {
  748. setTimeout(() => {
  749. const start = e.target.selectionStart;
  750. const end = e.target.selectionEnd;
  751. if (start !== end) {
  752. e.preventDefault();
  753. handleSelection(e);
  754. }
  755. }, 10);
  756. }
  757. });
  758. ​
  759. toolbar.querySelectorAll('button[data-tag]').forEach(btn => {
  760. btn.addEventListener('mousedown', (e) => {
  761. e.preventDefault();
  762. e.stopPropagation();
  763. formatText(btn.dataset.tag);
  764. });
  765. });
  766. ​
  767. toolbar.querySelectorAll('button[data-action]').forEach(btn => {
  768. btn.addEventListener('mousedown', (e) => {
  769. e.preventDefault();
  770. e.stopPropagation();
  772. if (btn.dataset.action === 'undo') {
  773. performUndo();
  774. } else if (btn.dataset.action === 'redo') {
  775. performRedo();
  776. }
  777. });
  778. });
  779. ​
  780. document.addEventListener('keydown', (e) => {
  781. const target = document.activeElement;
  782. const isTextInput = isRichField(target);
  784. if (!isTextInput) return;
  785. ​
  786. const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
  787. const modKey = isMac ? e.metaKey : e.ctrlKey;
  788. ​
  789. if (!modKey) return;
  790. ​
  791. const key = e.key.toLowerCase();
  793. if (key === 'z' && !e.shiftKey) {
  794. e.preventDefault();
  795. activeInput = target;
  796. performUndo();
  797. return;
  798. }
  800. if ((key === 'y' && !isMac) || (key === 'z' && e.shiftKey && isMac)) {
  801. e.preventDefault();
  802. activeInput = target;
  803. performRedo();
  804. return;
  805. }
  806. ​
  807. let tag = null;
  808. switch (key) {
  809. case 'b': tag = 'b'; break;
  810. case 'i': tag = 'i'; break;
  811. case 'u': tag = 'u'; break;
  812. }
  813. ​
  814. if (tag && target.selectionStart !== target.selectionEnd) {
  815. e.preventDefault();
  816. activeInput = target;
  817. formatText(tag);
  818. }
  819. });
  820. ​
  821. document.addEventListener('selectionchange', () => {
  822. if (activeInput && toolbar.classList.contains('active')) {
  823. updateButtonStates();
  824. }
  825. });
  826. ​
  827. window.addEventListener('scroll', () => hideToolbar(true), { passive: true });
  828. window.addEventListener('resize', () => hideToolbar(true), { passive: true });
  829. ​
  830. toolbar.addEventListener('mousedown', (e) => e.stopPropagation());
  831. ​
  832. document.addEventListener('mousedown', (e) => {
  833. if (!e.target.closest('.sas-floating-toolbar') &&
  834. !e.target.closest('.sas-toolbar-status') &&
  835. e.target !== activeInput) {
  836. hideToolbar(true);
  837. }
  838. });
  839. ​
  840. })();