diff --git a/web/editor.tsx b/web/editor.tsx index 7deb67a8..b38ce547 100644 --- a/web/editor.tsx +++ b/web/editor.tsx @@ -208,8 +208,8 @@ export class Editor { // Make keyboard shortcuts work even when the editor is in read only mode or not focused globalThis.addEventListener("keydown", (ev) => { if (!this.editorView?.hasFocus) { - if ((ev.target as any).classList.contains("cm-textfield")) { - // Search & replace feature, ignore this + if ((ev.target as any).closest(".cm-panel")) { + // In some CM panel, let's back out return; } if (runScopeHandlers(this.editorView!, ev, "editor")) { @@ -454,6 +454,15 @@ export class Editor { return EditorState.create({ doc: this.collabState ? this.collabState.ytext.toString() : text, extensions: [ + // Enable vim mode, or not + [ + ...this.builtinSettings.vimMode + ? [vim({ + status: true, + })] + : [], + ], + // The uber markdown mode markdown({ base: buildMarkdown(this.mdExtensions), codeLanguages: [ @@ -487,8 +496,6 @@ export class Editor { inlineImagesPlugin(), highlightSpecialChars(), history(), - // Enable vim mode - [...this.builtinSettings.vimMode ? [vim()] : []], drawSelection(), dropCursor(), indentOnInput(), diff --git a/web/styles/editor.scss b/web/styles/editor.scss index f40eb0fc..408a915e 100644 --- a/web/styles/editor.scss +++ b/web/styles/editor.scss @@ -1,13 +1,18 @@ .cm-editor { font-size: 18px; - padding: 0 20px; --max-width: 800px; + height: 100%; .cm-content { - margin: auto; + margin-left: auto; + margin-right: auto; max-width: var(--max-width); } + .cm-line { + padding: 0; + } + .sb-inline-img { max-width: 100%; }