Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-24 23:48:13 -05:00
Code Issues Activity

Wired up lexical editor focus when clicking below editor canvas

Browse source 
no issue

- we added support for and a demo of clicking below the editor moving focus to it in the Koenig repo but the implementation in Admin was missing
- replaced the commented-out mobiledoc handling in `<GhKoenigEditorLexical>` with the new Koenig-lexical equivalent
This commit is contained in:
Kevin Ansfield 2023-02-22 15:01:25 +00:00
parent f45d1810a6
commit dda1293ec0
No known key found for this signature in database
2 changed files with 14 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ghost/admin/app/components/gh-koenig-editor-lexical.hbs
View file

@ -4,7 +4,7 @@
<div
class="gh-koenig-editor-pane flex flex-column mih-100"
{{on "mousedown" this.trackMousedown}}
{{!-- {{on "mouseup" this.focusEditor}} --}}
{{on "mouseup" this.focusEditor}}
>
<GhEditorFeatureImage
@image={{@featureImage}}

47
ghost/admin/app/components/gh-koenig-editor-lexical.js
View file

@ -118,41 +118,20 @@ export default class GhKoenigEditorReactComponent extends Component {
// this.args.onEditorCreated?.(koenig);
// }
// @action
// focusEditor(event) {
// if (event.target.classList.contains('gh-koenig-editor-pane')) {
// let editorCanvas = this.koenigEditor.element;
// let {bottom} = editorCanvas.getBoundingClientRect();
@action
focusEditor(event) {
if (event.target.classList.contains('gh-koenig-editor-pane')) {
let editorCanvas = this.editorAPI.editorInstance.getRootElement();
let {bottom} = editorCanvas.getBoundingClientRect();
// // if a mousedown and subsequent mouseup occurs below the editor
// // canvas, focus the editor and put the cursor at the end of the
// // document
// if (this.mousedownY > bottom && event.clientY > bottom) {
// let {post} = this.koenigEditor;
// let range = post.toRange();
// let {tailSection} = range;
// event.preventDefault();
// this.koenigEditor.focus();
// // we should always have a visible cursor when focusing
// // at the bottom so create an empty paragraph if last
// // section is a card
// if (tailSection.isCardSection) {
// this.koenigEditor.run((postEditor) => {
// let newSection = postEditor.builder.createMarkupSection('p');
// postEditor.insertSectionAtEnd(newSection);
// tailSection = newSection;
// });
// }
// this.koenigEditor.selectRange(tailSection.tailPosition());
// // ensure we're scrolled to the bottom
// this.containerElement.scrollTop = this.containerElement.scrollHeight;
// }
// }
// }
// if a mousedown and subsequent mouseup occurs below the editor
// canvas, focus the editor and put the cursor at the end of the
// document
if (this.mousedownY > bottom && event.clientY > bottom) {
this.editorAPI.focusEditor();
}
}
}
// _setupEditor(koenig) {
// let component = this;