fix: insert link/media lands at the cursor and closes the overlay instead of breaking the editor

This commit is contained in:
hugo committed 2026-07-17 10:58:51 +02:00
1 parent b016f6d812
commit b517672663
6 files changed
+181 -23

No files matched your search

+20 -2
View File
@@ -34,6 +34,20 @@ export const webKitTextAreaArrowCommand = (event) => {
return event.shiftKey ? `${command}Select` : command;
};
// Applying a remote value via setValue resets the cursor to the buffer start,
// which then makes follow-up actions (like link inserts targeting the current
// selection) land at position 1,1. Capture and restore the selection so the
// cursor survives server-driven reconciles; Monaco clamps out-of-range
// positions to the new content.
export const applyRemoteEditorValue = (editor, value) => {
const selections = editor.getSelections ? editor.getSelections() : null;
editor.setValue(value);
if (selections && selections.length > 0 && editor.setSelections) {
editor.setSelections(selections);
}
};
export const bridgeWebKitTextAreaArrowKey = (editor, event) => {
if (!editor || !isMonacoInputArea(event.target)) {
return false;
@@ -92,8 +106,12 @@ export const MonacoEditor = {
if (this.editor.getValue() !== value) {
this.isApplyingRemoteUpdate = true;
this.editor.setValue(value);
this.isApplyingRemoteUpdate = false;
try {
applyRemoteEditorValue(this.editor, value);
} finally {
this.isApplyingRemoteUpdate = false;
}
}
this.lastKnownValue = value;
@@ -155,7 +155,7 @@ defmodule BDS.Desktop.ShellLive.OverlayManager do
ShellOverlayComponents.markdown_link(result.title, result.canonical_url)}
)
socket
assign(socket, :shell_overlay, nil)
end
{%{kind: :insert_media}, %{type: :post, id: post_id}} ->
@@ -172,7 +172,7 @@ defmodule BDS.Desktop.ShellLive.OverlayManager do
end
Notify.parent({:post_editor_insert_content, post_id, syntax})
socket
assign(socket, :shell_overlay, nil)
end
_other ->
@@ -197,10 +197,11 @@ defmodule BDS.Desktop.ShellLive.OverlayManager do
if details do
Notify.parent({:post_editor_insert_content, post_id, details})
assign(socket, :shell_overlay, nil)
else
socket
end
socket
_other ->
socket
end
+1 -15
View File
@@ -117,7 +117,6 @@ defmodule BDS.Desktop.ShellLive.PostEditor do
id: socket.assigns.post_id,
content: content
})
|> assign(:shell_overlay, nil)
{:ok, socket}
end
@@ -316,18 +315,6 @@ defmodule BDS.Desktop.ShellLive.PostEditor do
{:noreply, do_remove_list_value(socket, :categories, category)}
end
def handle_event("insert_content", %{"content" => content}, socket) do
socket =
socket
|> Phoenix.LiveView.push_event("post-editor-insert-content", %{
id: socket.assigns.post_id,
content: content
})
|> assign(:shell_overlay, nil)
{:noreply, socket}
end
def handle_event("close_quick_actions", _params, socket) do
socket =
socket
@@ -892,7 +879,7 @@ defmodule BDS.Desktop.ShellLive.PostEditor do
end)
if map_size(attrs) == 0 do
assign(socket, :shell_overlay, nil)
socket
else
case Posts.update_post(post_id, attrs) do
{:ok, updated_post} ->
@@ -910,7 +897,6 @@ defmodule BDS.Desktop.ShellLive.PostEditor do
)
|> assign(:save_state, :dirty)
|> assign(:dirty?, true)
|> assign(:shell_overlay, nil)
|> build_data()
Notify.dirty(:post, post_id, true)
+2 -2
View File
@@ -21,8 +21,8 @@ removing illegal node: "${(s.outerHTML||s.nodeValue).trim()}"
let liveSocket = new LiveSocket("/live", Socket, {...})
`);this.socket=new t(e,i),this.bindingPrefix=i.bindingPrefix||jn,this.opts=i,this.params=ze(i.params||{}),this.viewLogger=i.viewLogger,this.metadataCallbacks=i.metadata||{},this.defaults=Object.assign(bt(Vn),i.defaults||{}),this.prevActive=null,this.silenced=!1,this.main=null,this.outgoingMainEl=null,this.clickStartedAtTarget=null,this.linkRef=1,this.roots={},this.href=window.location.href,this.pendingLink=null,this.currentLocation=bt(window.location),this.hooks=i.hooks||{},this.uploaders=i.uploaders||{},this.loaderTimeout=i.loaderTimeout||$n,this.disconnectedTimeout=i.disconnectedTimeout||Un,this.reloadWithJitterTimer=null,this.maxReloads=i.maxReloads||An,this.reloadJitterMin=i.reloadJitterMin||kn,this.reloadJitterMax=i.reloadJitterMax||Tn,this.failsafeJitter=i.failsafeJitter||Cn,this.localStorage=i.localStorage||window.localStorage,this.sessionStorage=i.sessionStorage||window.sessionStorage,this.boundTopLevelEvents=!1,this.boundEventNames=new Set,this.blockPhxChangeWhileComposing=i.blockPhxChangeWhileComposing||!1,this.serverCloseRef=null,this.domCallbacks=Object.assign({jsQuerySelectorAll:null,onPatchStart:ze(),onPatchEnd:ze(),onNodeAdded:ze(),onBeforeElUpdated:ze()},i.dom||{}),this.transitions=new kr,this.currentHistoryPosition=parseInt(this.sessionStorage.getItem(ct))||0,window.addEventListener("pagehide",s=>{this.unloaded=!0}),this.socket.onOpen(()=>{this.isUnloaded()&&window.location.reload()})}version(){return"1.1.28"}isProfileEnabled(){return this.sessionStorage.getItem(Ft)==="true"}isDebugEnabled(){return this.sessionStorage.getItem(ht)==="true"}isDebugDisabled(){return this.sessionStorage.getItem(ht)==="false"}enableDebug(){this.sessionStorage.setItem(ht,"true")}enableProfiling(){this.sessionStorage.setItem(Ft,"true")}disableDebug(){this.sessionStorage.setItem(ht,"false")}disableProfiling(){this.sessionStorage.removeItem(Ft)}enableLatencySim(e){this.enableDebug(),console.log("latency simulator enabled for the duration of this browser session. Call disableLatencySim() to disable"),this.sessionStorage.setItem(Ut,e)}disableLatencySim(){this.sessionStorage.removeItem(Ut)}getLatencySim(){let e=this.sessionStorage.getItem(Ut);return e?parseInt(e):null}getSocket(){return this.socket}connect(){window.location.hostname==="localhost"&&!this.isDebugDisabled()&&this.enableDebug();let e=()=>{this.resetReloadStatus(),this.joinRootViews()?(this.bindTopLevelEvents(),this.socket.connect()):this.main?this.socket.connect():this.bindTopLevelEvents({dead:!0}),this.joinDeadView()};["complete","loaded","interactive"].indexOf(document.readyState)>=0?e():document.addEventListener("DOMContentLoaded",()=>e())}disconnect(e){clearTimeout(this.reloadWithJitterTimer),this.serverCloseRef&&(this.socket.off(this.serverCloseRef),this.serverCloseRef=null),this.socket.disconnect(e)}replaceTransport(e){clearTimeout(this.reloadWithJitterTimer),this.socket.replaceTransport(e),this.connect()}execJS(e,t,i=null){let s=new CustomEvent("phx:exec",{detail:{sourceElement:e}});this.owner(e,n=>P.exec(s,i,t,n,e))}js(){return hs(this,"js")}unload(){this.unloaded||(this.main&&this.isConnected()&&this.log(this.main,"socket",()=>["disconnect for page nav"]),this.unloaded=!0,this.destroyAllViews(),this.disconnect())}triggerDOM(e,t){this.domCallbacks[e](...t)}time(e,t){if(!this.isProfileEnabled()||!console.time)return t();console.time(e);let i=t();return console.timeEnd(e),i}log(e,t,i){if(this.viewLogger){let[s,n]=i();this.viewLogger(e,t,s,n)}else if(this.isDebugEnabled()){let[s,n]=i();Jn(e,t,s,n)}}requestDOMUpdate(e){this.transitions.after(e)}asyncTransition(e){this.transitions.addAsyncTransition(e)}transition(e,t,i=function(){}){this.transitions.addTransition(e,t,i)}onChannel(e,t,i){e.on(t,s=>{let n=this.getLatencySim();n?setTimeout(()=>i(s),n):i(s)})}reloadWithJitter(e,t){clearTimeout(this.reloadWithJitterTimer),this.disconnect();let i=this.reloadJitterMin,s=this.reloadJitterMax,n=Math.floor(Math.random()*(s-i+1))+i,r=B.updateLocal(this.localStorage,window.location.pathname,ts,0,o=>o+1);r>=this.maxReloads&&(n=this.failsafeJitter),this.reloadWithJitterTimer=setTimeout(()=>{e.isDestroyed()||e.isConnected()||(e.destroy(),t?t():this.log(e,"join",()=>[`encountered ${r} consecutive reloads`]),r>=this.maxReloads&&this.log(e,"join",()=>[`exceeded ${this.maxReloads} consecutive reloads. Entering failsafe mode`]),this.hasPendingLink()?window.location=this.pendingLink:window.location.reload())},n)}getHookDefinition(e){if(e)return this.maybeInternalHook(e)||this.hooks[e]||this.maybeRuntimeHook(e)}maybeInternalHook(e){return e&&e.startsWith("Phoenix.")&&ir[e.split(".")[1]]}maybeRuntimeHook(e){let t=document.querySelector(`script[${vt}="${CSS.escape(e)}"]`);if(!t)return;let i=window[`phx_hook_${e}`];if(!i||typeof i!="function"){I("a runtime hook must be a function",t);return}let s=i();if(s&&(typeof s=="object"||typeof s=="function"))return s;I("runtime hook must return an object with hook callbacks or an instance of ViewHook",t)}isUnloaded(){return this.u Line truncated
`)&&!this._prevInputValue.includes(`
`)){t.value=t.value.replace(/\n/g,""),this._prevInputValue=t.value,this.stickToBottom=!0,this.autoResize(),this._submitChat();return}this._enterKeyHandled=!1,this._prevInputValue=t.value,this.stickToBottom=!0,this.autoResize()},this.handleKeyDown=e=>{e.target.closest(".chat-input")&&e.key==="Enter"&&!e.shiftKey&&!e.isComposing&&(e.preventDefault(),this._enterKeyHandled=!0,this._submitChat())},this.el.addEventListener("input",this.handleInput),this.el.addEventListener("keydown",this.handleKeyDown),this.syncScrollContainer(),this.syncExpandedSurfaces(),this.surfaceObserver.observe(this.el,{childList:!0,subtree:!0}),this.autoResize(),window.requestAnimationFrame(()=>this.scrollToBottom(!0))},updated(){this.syncScrollContainer(),this.syncExpandedSurfaces(),this.autoResize(),window.requestAnimationFrame(()=>this.scrollToBottom())},destroyed(){this.surfaceObserver.disconnect(),this.el.removeEventListener("input",this.handleInput),this.el.removeEventListener("keydown",this.handleKeyDown),this.scrollContainer&&this.scrollContainer.removeEventListener("scroll",this.handleScroll)}};var Ds={mounted(){this._onClickAway=e=>{this.el.contains(e.target)||this.el.querySelector(".colour-picker-popover")?.classList.add("hidden")},document.addEventListener("mousedown",this._onClickAway),this._setupCustomInput()},updated(){this._setupCustomInput()},destroyed(){document.removeEventListener("mousedown",this._onClickAway)},_setupCustomInput(){let e=this.el.querySelector(".colour-picker-custom input");if(!e||e._cpBound)return;e._cpBound=!0;let t=()=>{let i=e.value.trim();if(i&&!i.startsWith("#")&&(i="#"+i),/^#[0-9a-fA-F]{6}$/.test(i)){let s=this.el.dataset.pickEvent;this.pushEventTo(this.el.dataset.target,s,{color:i}),this.el.querySelector(".colour-picker-popover")?.classList.add("hidden")}};e.addEventListener("keydown",i=>{i.key==="Enter"&&(i.preventDefault(),t())}),e.addEventListener("blur",t)}};var Os={mounted(){this.dragItemId=null,this.dragSourceEl=null,this.dropTargetEl=null,this.dropPosition=null,this.clearDropTarget=()=>{this.dropTargetEl&&this.dropTargetEl.classList.remove("is-drop-before","is-drop-after","is-drop-inside"),this.dropTargetEl=null,this.dropPosition=null},this.setDropTarget=(e,t)=>{this.dropTargetEl===e&&this.dropPosition===t||(this.clearDropTarget(),this.dropTargetEl=e,this.dropPosition=t,e.classList.add(`is-drop-${t}`))},this.handleDragStart=e=>{let t=e.target.closest("[data-menu-drag-handle='true']"),i=e.target.closest("[data-menu-item-id]");!t||!i||!this.el.contains(i)||(this.dragItemId=i.dataset.menuItemId||null,this.dragSourceEl=i,i.classList.add("is-dragging"),e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",this.dragItemId||"")))},this.handleDragOver=e=>{let t=e.target.closest("[data-menu-item-id]");if(!this.dragItemId||!t||!this.el.contains(t)){this.clearDropTarget();return}let i=t.dataset.menuItemId||"";if(!i||i===this.dragItemId){this.clearDropTarget();return}e.preventDefault();let s=t.getBoundingClientRect(),n=e.clientY-s.top,r=t.dataset.menuCanDropInside==="true",o=s.height*.3,a=s.height*.7,l=r&&n>=o&&n<=a?"inside":n<s.height/2?"before":"after";this.setDropTarget(t,l),e.dataTransfer&&(e.dataTransfer.dropEffect="move")},this.handleDrop=e=>{let t=e.target.closest("[data-menu-item-id]");if(!this.dragItemId||!t||!this.el.contains(t)||!this.dropPosition){this.clearDropTarget();return}e.preventDefault(),this.pushEvent("menu_editor_drop_item",{drag_item_id:this.dragItemId,target_item_id:t.dataset.menuItemId,position:this.dropPosition}),this.clearDropTarget()},this.handleDragLeave=e=>{let t=e.relatedTarget;this.dropTargetEl&&(!t||!this.dropTargetEl.contains(t))&&this.clearDropTarget()},this.handleDragEnd=()=>{this.dragSourceEl&&this.dragSourceEl.classList.remove("is-dragging"),this.dragItemId=null,this.dragSourceEl=null,this.clearDropTarget()},this.el.addEventListener("dragstart",this.handleDragStart),this.el.addEventListener("dragover",this.handleDragOver),this.el.addEventListener("drop",this.handleDrop),this.el.addEventListener("dragleave",this.handleDragLeave),this.el.addEventListener("dragend",this.handleDragEnd)},destroyed(){this.el.removeEventListener("dragstart",this.handleDragStart),this.el.removeEventListener("dragover",this.handleDragOver),this.el.removeEventListener("drop",this.handleDrop),this.el.removeEventListener("dragleave",this.handleDragLeave),this.el.removeEventListener("dragend",this.handleDragEnd)}};var Pr={ArrowLeft:"cursorLeft",ArrowRight:"cursorRight",ArrowUp:"cursorUp",ArrowDown:"cursorDown"},Rr=()=>{let e=globalThis.navigator?.userAgent||"";return e.includes("AppleWebKit")&&!e.includes("Chrome")&&!e.includes("Chromium")},Lr=e=>e instanceof HTMLTextAreaElement&&e.classList.contains("inputarea"),Ir=e=>{if(e?.altKey||e?.ctrlKey||e?.metaKey)return null;let t=Pr[e?.key];return t?e.shiftKey?`${t}Select`:t:null},Dr=(e,t)=>{if(!e||!Lr(t.target))return!1;let i=Ir(t);return i?(t.preventDefault(),t.stopPropagation(),e.trigger("keyboard",i,{source:"k Line truncated
`)){t.value=t.value.replace(/\n/g,""),this._prevInputValue=t.value,this.stickToBottom=!0,this.autoResize(),this._submitChat();return}this._enterKeyHandled=!1,this._prevInputValue=t.value,this.stickToBottom=!0,this.autoResize()},this.handleKeyDown=e=>{e.target.closest(".chat-input")&&e.key==="Enter"&&!e.shiftKey&&!e.isComposing&&(e.preventDefault(),this._enterKeyHandled=!0,this._submitChat())},this.el.addEventListener("input",this.handleInput),this.el.addEventListener("keydown",this.handleKeyDown),this.syncScrollContainer(),this.syncExpandedSurfaces(),this.surfaceObserver.observe(this.el,{childList:!0,subtree:!0}),this.autoResize(),window.requestAnimationFrame(()=>this.scrollToBottom(!0))},updated(){this.syncScrollContainer(),this.syncExpandedSurfaces(),this.autoResize(),window.requestAnimationFrame(()=>this.scrollToBottom())},destroyed(){this.surfaceObserver.disconnect(),this.el.removeEventListener("input",this.handleInput),this.el.removeEventListener("keydown",this.handleKeyDown),this.scrollContainer&&this.scrollContainer.removeEventListener("scroll",this.handleScroll)}};var Ds={mounted(){this._onClickAway=e=>{this.el.contains(e.target)||this.el.querySelector(".colour-picker-popover")?.classList.add("hidden")},document.addEventListener("mousedown",this._onClickAway),this._setupCustomInput()},updated(){this._setupCustomInput()},destroyed(){document.removeEventListener("mousedown",this._onClickAway)},_setupCustomInput(){let e=this.el.querySelector(".colour-picker-custom input");if(!e||e._cpBound)return;e._cpBound=!0;let t=()=>{let i=e.value.trim();if(i&&!i.startsWith("#")&&(i="#"+i),/^#[0-9a-fA-F]{6}$/.test(i)){let s=this.el.dataset.pickEvent;this.pushEventTo(this.el.dataset.target,s,{color:i}),this.el.querySelector(".colour-picker-popover")?.classList.add("hidden")}};e.addEventListener("keydown",i=>{i.key==="Enter"&&(i.preventDefault(),t())}),e.addEventListener("blur",t)}};var Os={mounted(){this.dragItemId=null,this.dragSourceEl=null,this.dropTargetEl=null,this.dropPosition=null,this.clearDropTarget=()=>{this.dropTargetEl&&this.dropTargetEl.classList.remove("is-drop-before","is-drop-after","is-drop-inside"),this.dropTargetEl=null,this.dropPosition=null},this.setDropTarget=(e,t)=>{this.dropTargetEl===e&&this.dropPosition===t||(this.clearDropTarget(),this.dropTargetEl=e,this.dropPosition=t,e.classList.add(`is-drop-${t}`))},this.handleDragStart=e=>{let t=e.target.closest("[data-menu-drag-handle='true']"),i=e.target.closest("[data-menu-item-id]");!t||!i||!this.el.contains(i)||(this.dragItemId=i.dataset.menuItemId||null,this.dragSourceEl=i,i.classList.add("is-dragging"),e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",this.dragItemId||"")))},this.handleDragOver=e=>{let t=e.target.closest("[data-menu-item-id]");if(!this.dragItemId||!t||!this.el.contains(t)){this.clearDropTarget();return}let i=t.dataset.menuItemId||"";if(!i||i===this.dragItemId){this.clearDropTarget();return}e.preventDefault();let s=t.getBoundingClientRect(),n=e.clientY-s.top,r=t.dataset.menuCanDropInside==="true",o=s.height*.3,a=s.height*.7,l=r&&n>=o&&n<=a?"inside":n<s.height/2?"before":"after";this.setDropTarget(t,l),e.dataTransfer&&(e.dataTransfer.dropEffect="move")},this.handleDrop=e=>{let t=e.target.closest("[data-menu-item-id]");if(!this.dragItemId||!t||!this.el.contains(t)||!this.dropPosition){this.clearDropTarget();return}e.preventDefault(),this.pushEvent("menu_editor_drop_item",{drag_item_id:this.dragItemId,target_item_id:t.dataset.menuItemId,position:this.dropPosition}),this.clearDropTarget()},this.handleDragLeave=e=>{let t=e.relatedTarget;this.dropTargetEl&&(!t||!this.dropTargetEl.contains(t))&&this.clearDropTarget()},this.handleDragEnd=()=>{this.dragSourceEl&&this.dragSourceEl.classList.remove("is-dragging"),this.dragItemId=null,this.dragSourceEl=null,this.clearDropTarget()},this.el.addEventListener("dragstart",this.handleDragStart),this.el.addEventListener("dragover",this.handleDragOver),this.el.addEventListener("drop",this.handleDrop),this.el.addEventListener("dragleave",this.handleDragLeave),this.el.addEventListener("dragend",this.handleDragEnd)},destroyed(){this.el.removeEventListener("dragstart",this.handleDragStart),this.el.removeEventListener("dragover",this.handleDragOver),this.el.removeEventListener("drop",this.handleDrop),this.el.removeEventListener("dragleave",this.handleDragLeave),this.el.removeEventListener("dragend",this.handleDragEnd)}};var Pr={ArrowLeft:"cursorLeft",ArrowRight:"cursorRight",ArrowUp:"cursorUp",ArrowDown:"cursorDown"},Rr=()=>{let e=globalThis.navigator?.userAgent||"";return e.includes("AppleWebKit")&&!e.includes("Chrome")&&!e.includes("Chromium")},Lr=e=>e instanceof HTMLTextAreaElement&&e.classList.contains("inputarea"),Ir=e=>{if(e?.altKey||e?.ctrlKey||e?.metaKey)return null;let t=Pr[e?.key];return t?e.shiftKey?`${t}Select`:t:null},Dr=(e,t)=>{let i=e.getSelections?e.getSelections():null;e.setValue(t),i&&i.length>0&&e.setSelections&&e.setSelections(i)},Or=(e,t)=>{if Line truncated
`)?`
`:"",d=l!==""&&!t.endsWith(`
`)?`
`:"",p=`${h}${t}${d}`;this.editor.executeEdits("bds-insert-content",[{range:s,text:p,forceMoveMarkers:!0}]),this.editor.focus()},$e().then(async e=>{!this.host||!this.textarea||(await this.waitForMonacoVisibleSize(),ce(e),this.editor=e.editor.create(this.host,{value:this.textarea.value||"",language:this.language,theme:"bds-theme",automaticLayout:!0,minimap:{enabled:!1},scrollBeyondLastLine:!1,wordWrap:this.wordWrap,lineNumbers:"on",lineNumbersMinChars:3,fontSize:14,fontFamily:"'Cascadia Code', 'Consolas', 'Courier New', monospace",padding:{top:12,bottom:12},roundedSelection:!1,renderLineHighlight:"line",formatOnPaste:!0,cursorStyle:"line",cursorBlinking:"smooth",quickSuggestions:this.language!=="markdown-with-macros",tabSize:2,insertSpaces:!0}),As(this.editorId||this.el.id,this.editor),e.editor.setTheme("bds-theme"),this.syncEditorFromTextarea(),this.layoutEditorSoon(),this.changeSubscription=this.editor.onDidChangeModelContent(()=>{this.isApplyingRemoteUpdate||this.queueSync()}),this.insertEvent&&this.handleEvent(this.insertEvent,this.handleInsert),this.dropEvent&&(this.el.addEventListener("dragover",this.handleDragOver),this.el.addEventListener("drop",this.handleDrop)),Rr()&&this.host.addEventListener("keydown",this.handleWebKitTextAreaArrowKey,!0))}).catch(e=>{console.error("Failed to load Monaco editor",e)})},updated(){this.textarea=document.getElementById(this.el.dataset.monacoInputId)||this.el.querySelector("textarea"),this.host=this.el.querySelector(".monaco-editor-instance"),this.language=this.el.dataset.monacoLanguage||this.language||"plaintext",this.wordWrap=this.el.dataset.monacoWordWrap||this.wordWrap||"off",!(!this.editor||!this.textarea)&&($e().then(e=>{ce(e),e.editor.setTheme("bds-theme"),this.editor.getModel()?.getLanguageId()!==this.language&&e.editor.setModelLanguage(this.editor.getModel(),this.language),this.editor.updateOptions({wordWrap:this.wordWrap})}),this.syncEditorFromTextarea(),this.layoutEditorSoon())},destroyed(){window.clearTimeout(this.syncTimer),this.visibleSizeObserver?.disconnect(),this.changeSubscription?.dispose(),this.dropEvent&&(this.el.removeEventListener("dragover",this.handleDragOver),this.el.removeEventListener("drop",this.handleDrop)),this.host?.removeEventListener("keydown",this.handleWebKitTextAreaArrowKey,!0),ks(this.editorId||this.el.id),this.editor?.dispose()}};var Hs={mounted(){this.host=this.el.querySelector(".monaco-diff-editor-instance"),this.originalInput=this.el.querySelector(".monaco-diff-original"),this.modifiedInput=this.el.querySelector(".monaco-diff-modified"),this.filePath=this.el.dataset.monacoDiffFilePath||"working-tree",this.language=this.el.dataset.monacoDiffLanguage||"plaintext",this.viewStyle=this.el.dataset.monacoDiffViewStyle||"inline",this.wordWrap=this.el.dataset.monacoDiffWordWrap||"off",this.hideUnchanged=this.el.dataset.monacoDiffHideUnchanged==="true",this.readValues=()=>({original:this.originalInput?.value||"",modified:this.modifiedInput?.value||""}),this.applyDataset=()=>{this.filePath=this.el.dataset.monacoDiffFilePath||"working-tree",this.language=this.el.dataset.monacoDiffLanguage||"plaintext",this.viewStyle=this.el.dataset.monacoDiffViewStyle||"inline",this.wordWrap=this.el.dataset.monacoDiffWordWrap||"off",this.hideUnchanged=this.el.dataset.monacoDiffHideUnchanged==="true"},this.setModels=e=>{let t=this.readValues();this.originalModel?.dispose(),this.modifiedModel?.dispose(),this.originalModel=e.editor.createModel(t.original,this.language,e.Uri.parse(ci(this.filePath,"original"))),this.modifiedModel=e.editor.createModel(t.modified,this.language,e.Uri.parse(ci(this.filePath,"modified"))),this.editor.setModel({original:this.originalModel,modified:this.modifiedModel}),this.lastFilePath=this.filePath},$e().then(e=>{this.host&&(ce(e),this.editor=e.editor.createDiffEditor(this.host,{theme:"bds-theme",automaticLayout:!0,readOnly:!0,renderSideBySide:this.viewStyle==="side-by-side",minimap:{enabled:!1},scrollBeyondLastLine:!1,lineNumbers:"on",diffCodeLens:!1,originalEditable:!1,wordWrap:this.wordWrap,hideUnchangedRegions:{enabled:this.hideUnchanged},ignoreTrimWhitespace:!1}),this.setModels(e))}).catch(e=>{console.error("Failed to load Monaco diff editor",e)})},updated(){this.host=this.el.querySelector(".monaco-diff-editor-instance"),this.originalInput=this.el.querySelector(".monaco-diff-original"),this.modifiedInput=this.el.querySelector(".monaco-diff-modified"),this.applyDataset(),this.editor&&$e().then(e=>{if(ce(e),e.editor.setTheme("bds-theme"),this.editor.updateOptions({renderSideBySide:this.viewStyle==="side-by-side",wordWrap:this.wordWrap,hideUnchangedRegions:{enabled:this.hideUnchanged}}),this.lastFilePath!==this.filePath){this.setModels(e);return}let t=this.readValues();this.originalModel&&this.originalModel.getLanguageId()!==this.language&&e.editor.setModelLanguage(this.originalModel,this.language),this.modifiedModel&&this.modifiedModel.getLanguageId()!==this.language&&e.editor.setModelLanguage(this.modifiedModel,this.language Line truncated
`:"",p=`${h}${t}${d}`;this.editor.executeEdits("bds-insert-content",[{range:s,text:p,forceMoveMarkers:!0}]),this.editor.focus()},$e().then(async e=>{!this.host||!this.textarea||(await this.waitForMonacoVisibleSize(),ce(e),this.editor=e.editor.create(this.host,{value:this.textarea.value||"",language:this.language,theme:"bds-theme",automaticLayout:!0,minimap:{enabled:!1},scrollBeyondLastLine:!1,wordWrap:this.wordWrap,lineNumbers:"on",lineNumbersMinChars:3,fontSize:14,fontFamily:"'Cascadia Code', 'Consolas', 'Courier New', monospace",padding:{top:12,bottom:12},roundedSelection:!1,renderLineHighlight:"line",formatOnPaste:!0,cursorStyle:"line",cursorBlinking:"smooth",quickSuggestions:this.language!=="markdown-with-macros",tabSize:2,insertSpaces:!0}),As(this.editorId||this.el.id,this.editor),e.editor.setTheme("bds-theme"),this.syncEditorFromTextarea(),this.layoutEditorSoon(),this.changeSubscription=this.editor.onDidChangeModelContent(()=>{this.isApplyingRemoteUpdate||this.queueSync()}),this.insertEvent&&this.handleEvent(this.insertEvent,this.handleInsert),this.dropEvent&&(this.el.addEventListener("dragover",this.handleDragOver),this.el.addEventListener("drop",this.handleDrop)),Rr()&&this.host.addEventListener("keydown",this.handleWebKitTextAreaArrowKey,!0))}).catch(e=>{console.error("Failed to load Monaco editor",e)})},updated(){this.textarea=document.getElementById(this.el.dataset.monacoInputId)||this.el.querySelector("textarea"),this.host=this.el.querySelector(".monaco-editor-instance"),this.language=this.el.dataset.monacoLanguage||this.language||"plaintext",this.wordWrap=this.el.dataset.monacoWordWrap||this.wordWrap||"off",!(!this.editor||!this.textarea)&&($e().then(e=>{ce(e),e.editor.setTheme("bds-theme"),this.editor.getModel()?.getLanguageId()!==this.language&&e.editor.setModelLanguage(this.editor.getModel(),this.language),this.editor.updateOptions({wordWrap:this.wordWrap})}),this.syncEditorFromTextarea(),this.layoutEditorSoon())},destroyed(){window.clearTimeout(this.syncTimer),this.visibleSizeObserver?.disconnect(),this.changeSubscription?.dispose(),this.dropEvent&&(this.el.removeEventListener("dragover",this.handleDragOver),this.el.removeEventListener("drop",this.handleDrop)),this.host?.removeEventListener("keydown",this.handleWebKitTextAreaArrowKey,!0),ks(this.editorId||this.el.id),this.editor?.dispose()}};var Hs={mounted(){this.host=this.el.querySelector(".monaco-diff-editor-instance"),this.originalInput=this.el.querySelector(".monaco-diff-original"),this.modifiedInput=this.el.querySelector(".monaco-diff-modified"),this.filePath=this.el.dataset.monacoDiffFilePath||"working-tree",this.language=this.el.dataset.monacoDiffLanguage||"plaintext",this.viewStyle=this.el.dataset.monacoDiffViewStyle||"inline",this.wordWrap=this.el.dataset.monacoDiffWordWrap||"off",this.hideUnchanged=this.el.dataset.monacoDiffHideUnchanged==="true",this.readValues=()=>({original:this.originalInput?.value||"",modified:this.modifiedInput?.value||""}),this.applyDataset=()=>{this.filePath=this.el.dataset.monacoDiffFilePath||"working-tree",this.language=this.el.dataset.monacoDiffLanguage||"plaintext",this.viewStyle=this.el.dataset.monacoDiffViewStyle||"inline",this.wordWrap=this.el.dataset.monacoDiffWordWrap||"off",this.hideUnchanged=this.el.dataset.monacoDiffHideUnchanged==="true"},this.setModels=e=>{let t=this.readValues();this.originalModel?.dispose(),this.modifiedModel?.dispose(),this.originalModel=e.editor.createModel(t.original,this.language,e.Uri.parse(ci(this.filePath,"original"))),this.modifiedModel=e.editor.createModel(t.modified,this.language,e.Uri.parse(ci(this.filePath,"modified"))),this.editor.setModel({original:this.originalModel,modified:this.modifiedModel}),this.lastFilePath=this.filePath},$e().then(e=>{this.host&&(ce(e),this.editor=e.editor.createDiffEditor(this.host,{theme:"bds-theme",automaticLayout:!0,readOnly:!0,renderSideBySide:this.viewStyle==="side-by-side",minimap:{enabled:!1},scrollBeyondLastLine:!1,lineNumbers:"on",diffCodeLens:!1,originalEditable:!1,wordWrap:this.wordWrap,hideUnchangedRegions:{enabled:this.hideUnchanged},ignoreTrimWhitespace:!1}),this.setModels(e))}).catch(e=>{console.error("Failed to load Monaco diff editor",e)})},updated(){this.host=this.el.querySelector(".monaco-diff-editor-instance"),this.originalInput=this.el.querySelector(".monaco-diff-original"),this.modifiedInput=this.el.querySelector(".monaco-diff-modified"),this.applyDataset(),this.editor&&$e().then(e=>{if(ce(e),e.editor.setTheme("bds-theme"),this.editor.updateOptions({renderSideBySide:this.viewStyle==="side-by-side",wordWrap:this.wordWrap,hideUnchangedRegions:{enabled:this.hideUnchanged}}),this.lastFilePath!==this.filePath){this.setModels(e);return}let t=this.readValues();this.originalModel&&this.originalModel.getLanguageId()!==this.language&&e.editor.setModelLanguage(this.originalModel,this.language),this.modifiedModel&&this.modifiedModel.getLanguageId()!==this.language&&e.editor.setModelLanguage(this.modifiedModel,this.language Line truncated
+109
View File
@@ -3427,6 +3427,115 @@ defmodule BDS.Desktop.ShellLiveTest do
assert output_html =~ "Automatic AI actions stay gated by airplane mode"
end
test "selecting an internal insert link result pushes the link and closes the overlay", %{
project: project
} do
{:ok, target} =
Posts.create_post(%{project_id: project.id, title: "Link Target", content: "Target body"})
{:ok, post} =
Posts.create_post(%{project_id: project.id, title: "Editing Post", content: "Body"})
{:ok, view, _html} = live_isolated(build_conn(), BDS.Desktop.ShellLive)
render_click(view, "pin_sidebar_item", %{
"route" => "post",
"id" => post.id,
"title" => post.title,
"subtitle" => "draft"
})
html =
view
|> element("[phx-click='open_overlay'][phx-value-kind='insert_link']")
|> render_click()
assert html =~ "insert-modal"
render_click(view, "overlay_select_result", %{"id" => target.id})
assert_push_event(view, "post-editor-insert-content", %{id: _id, content: content})
assert content =~ "Link Target"
refute render(view) =~ "insert-modal"
end
test "inserting an external link pushes the link and closes the overlay", %{project: project} do
{:ok, post} =
Posts.create_post(%{project_id: project.id, title: "Editing Post", content: "Body"})
{:ok, view, _html} = live_isolated(build_conn(), BDS.Desktop.ShellLive)
render_click(view, "pin_sidebar_item", %{
"route" => "post",
"id" => post.id,
"title" => post.title,
"subtitle" => "draft"
})
html =
view
|> element("[phx-click='open_overlay'][phx-value-kind='insert_link']")
|> render_click()
assert html =~ "insert-modal"
render_click(view, "overlay_set_tab", %{"tab" => "external"})
render_change(view, "overlay_update_form", %{
"overlay" => %{"url" => "https://example.com", "text" => "Example"}
})
render_click(view, "overlay_insert_external", %{})
assert_push_event(view, "post-editor-insert-content", %{content: "[Example](https://example.com)"})
refute render(view) =~ "insert-modal"
end
test "selecting an insert media result pushes the syntax and closes the overlay", %{
project: project
} do
temp_dir =
Path.join(System.tmp_dir!(), "bds-shell-live-#{System.unique_integer([:positive])}")
File.mkdir_p!(temp_dir)
media_source_path = Path.join(temp_dir, "insert-media.jpg")
File.write!(media_source_path, "fake image body")
{:ok, media} =
Media.import_media(%{
project_id: project.id,
source_path: media_source_path,
title: "Insert Media"
})
{:ok, post} =
Posts.create_post(%{project_id: project.id, title: "Editing Post", content: "Body"})
{:ok, view, _html} = live_isolated(build_conn(), BDS.Desktop.ShellLive)
render_click(view, "pin_sidebar_item", %{
"route" => "post",
"id" => post.id,
"title" => post.title,
"subtitle" => "draft"
})
html =
view
|> element("[phx-click='open_overlay'][phx-value-kind='insert_media']")
|> render_click()
assert html =~ "insert-modal"
render_click(view, "overlay_set_search", %{"overlay" => %{"query" => "Insert"}})
render_click(view, "overlay_select_result", %{"id" => media.id})
assert_push_event(view, "post-editor-insert-content", %{content: content})
assert content =~ "bds-media://#{media.id}"
refute render(view) =~ "insert-modal"
end
test "ai suggestions overlay fetches async results for posts when online", %{project: project} do
Application.put_env(:bds, :test_pid, self())
+44
View File
@@ -400,6 +400,50 @@ defmodule BDS.UI.ShellTest do
assert status == 0, output
end
test "monaco hook preserves cursor and selection when applying a remote value" do
script = """
import assert from "node:assert/strict";
class FakeTextArea {}
globalThis.HTMLTextAreaElement = FakeTextArea;
const { applyRemoteEditorValue } = await import("./assets/js/hooks/monaco_editor.js");
const selections = [{ startLineNumber: 3, startColumn: 5, endLineNumber: 3, endColumn: 9 }];
const calls = [];
const editor = {
getSelections: () => selections,
setValue: (value) => calls.push(["setValue", value]),
setSelections: (restored) => calls.push(["setSelections", restored])
};
applyRemoteEditorValue(editor, "line one\\nline two\\nline three");
assert.deepEqual(calls, [
["setValue", "line one\\nline two\\nline three"],
["setSelections", selections]
]);
// Editors without selections still get the value applied.
const bareCalls = [];
const bareEditor = {
getSelections: () => null,
setValue: (value) => bareCalls.push(["setValue", value]),
setSelections: () => bareCalls.push(["setSelections"])
};
applyRemoteEditorValue(bareEditor, "fresh");
assert.deepEqual(bareCalls, [["setValue", "fresh"]]);
"""
{output, status} =
System.cmd("node", ["--input-type=module", "--eval", script],
cd: "/Users/gb/Projects/bDS2",
stderr_to_stdout: true
)
assert status == 0, output
end
test "monaco ESM build config emits served worker bundles" do
mix_exs = File.read!("/Users/gb/Projects/bDS2/mix.exs")
config = File.read!("/Users/gb/Projects/bDS2/config/config.exs")