+
+
+
+
+
+ `;
+
+ document.body.appendChild(popup);
+ this.currentPopup = popup;
+
+ const rect = this.wrapper.getBoundingClientRect();
+ popup.style.top = `${rect.top + 100}px`;
+ popup.style.left = `${rect.left + (rect.width / 2) - 200}px`;
+
+ popup.querySelector('.miku-popup-close').onclick = () => this.closePopup();
+ popup.querySelector('#link-cancel').onclick = () => this.closePopup();
+ popup.querySelector('#link-insert').onclick = () => {
+ const text = popup.querySelector('#link-text').value;
+ const url = popup.querySelector('#link-url').value;
+ const target = popup.querySelector('#link-target').checked ? '_blank' : '_self';
+
+ if (existingLink) {
+ existingLink.textContent = text;
+ existingLink.href = url;
+ existingLink.target = target;
+ } else {
+ this.insertLink(text, url, target);
+ }
+
+ this.closePopup();
+ };
+
+ popup.querySelector('#link-text').focus();
+ }
+
+ insertLink(text, url, target) {
+ if (!text || !url) return;
+
+ const link = document.createElement('a');
+ link.href = url;
+ link.target = target;
+ link.textContent = text;
+ link.className = 'miku-editable-link';
+
+ this.restoreSelection();
+ const selection = window.getSelection();
+ if (selection.rangeCount === 0) return;
+
+ const range = selection.getRangeAt(0);
+ range.deleteContents();
+ range.insertNode(link);
+
+ range.setStartAfter(link);
+ range.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(range);
+ }
+
+ handleLinkClick(e) {
+ if (e.target.tagName === 'A' && e.target.classList.contains('miku-editable-link')) {
+ e.preventDefault();
+
+ const editIcon = document.createElement('span');
+ editIcon.className = 'miku-link-edit';
+ editIcon.innerHTML = '✎';
+ editIcon.onclick = (event) => {
+ event.stopPropagation();
+ this.showLinkPopup(e.target);
+ editIcon.remove();
+ };
+
+ e.target.parentNode.insertBefore(editIcon, e.target.nextSibling);
+
+ setTimeout(() => editIcon.remove(), 3000);
+ }
+ }
+
+ handleLinkEditing() {
+ document.querySelectorAll('.miku-link-edit').forEach(icon => icon.remove());
+ }
+
+ handleKeyDown(e) {
+ const selection = window.getSelection();
+ if (!selection.rangeCount) return;
+
+ const range = selection.getRangeAt(0);
+ const node = range.startContainer;
+ const parent = node.nodeType === Node.TEXT_NODE ? node.parentElement : node;
+
+ if (parent.closest('pre[contenteditable="true"]')) {
+ if (e.key === 'Tab') {
+ e.preventDefault();
+ document.execCommand('insertText', false, ' ');
+ }
+ return;
+ }
+
+ if (e.key === 'Enter') {
+ const code = parent.closest('code');
+ if (code && !code.closest('pre')) {
+ e.preventDefault();
+ const textNode = document.createTextNode('\u00A0');
+ code.parentNode.insertBefore(textNode, code.nextSibling);
+ const br = document.createElement('br');
+ textNode.parentNode.insertBefore(br, textNode.nextSibling);
+ const newRange = document.createRange();
+ newRange.setStartAfter(br);
+ newRange.collapse(true);
+ selection.removeAllRanges();
+ selection.addRange(newRange);
+ return;
+ }
+
+ const blockquote = parent.closest('blockquote');
+ if (blockquote && !e.shiftKey) {
+ e.preventDefault();
+ const p = document.createElement('p');
+ p.innerHTML = '
+
{% include "_partials/journal_header.html" with journal=journal %}
-
+
+
+