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 <div
class="gh-koenig-editor-pane flex flex-column mih-100" class="gh-koenig-editor-pane flex flex-column mih-100"
{{on "mousedown" this.trackMousedown}} {{on "mousedown" this.trackMousedown}}
{{!-- {{on "mouseup" this.focusEditor}} --}} {{on "mouseup" this.focusEditor}}
> >
<GhEditorFeatureImage <GhEditorFeatureImage
@image={{@featureImage}} @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); // this.args.onEditorCreated?.(koenig);
// } // }
// @action @action
// focusEditor(event) { focusEditor(event) {
// if (event.target.classList.contains('gh-koenig-editor-pane')) { if (event.target.classList.contains('gh-koenig-editor-pane')) {
// let editorCanvas = this.koenigEditor.element; let editorCanvas = this.editorAPI.editorInstance.getRootElement();
// let {bottom} = editorCanvas.getBoundingClientRect(); let {bottom} = editorCanvas.getBoundingClientRect();
// // if a mousedown and subsequent mouseup occurs below the editor // if a mousedown and subsequent mouseup occurs below the editor
// // canvas, focus the editor and put the cursor at the end of the // canvas, focus the editor and put the cursor at the end of the
// // document // document
// if (this.mousedownY > bottom && event.clientY > bottom) { if (this.mousedownY > bottom && event.clientY > bottom) {
// let {post} = this.koenigEditor; this.editorAPI.focusEditor();
// 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;
// }
// }
// }
// _setupEditor(koenig) { // _setupEditor(koenig) {
// let component = this; // let component = this;