diff --git a/src/components/editor/create/create.ts b/src/components/editor/create/create.ts index 9ab3c46..29954c8 100644 --- a/src/components/editor/create/create.ts +++ b/src/components/editor/create/create.ts @@ -2,6 +2,7 @@ import * as monaco from "monaco-editor"; import { ensureEditorEnv } from "./env"; import { Editor } from "../state/state"; import { initVimMode, EditorVimMode } from "monaco-vim"; +import { getEditorOptions } from "./options"; interface Options { editor: HTMLDivElement; @@ -14,57 +15,11 @@ interface Result { editor: Editor; } -export const getLeftPadding = (container: HTMLDivElement) => { - return Math.max((container.clientWidth - 1000) / 2, 24); -}; - export const createEditor = (options: Options): Result => { ensureEditorEnv(); - const editor = monaco.editor.create(options.editor, { - value: "", - language: "markdown", - - ariaLabel: "Main markdown editor", - codeLens: false, - contextmenu: false, - copyWithSyntaxHighlighting: false, - cursorBlinking: "smooth", - cursorSmoothCaretAnimation: true, - cursorSurroundingLines: 3, - cursorWidth: 3, - fontFamily: "iA Writer Duo", - fontLigatures: true, - fontWeight: "450", - glyphMargin: false, - lineDecorationsWidth: getLeftPadding(options.editor), - disableMonospaceOptimizations: true, - fontSize: 20, - lineHeight: 40, - lineNumbers: "off", - minimap: { enabled: false }, - padding: { top: 150, bottom: 150 }, - quickSuggestions: false, - roundedSelection: false, - selectionHighlight: false, - smoothScrolling: true, - snippetSuggestions: "none", - suggestOnTriggerCharacters: false, - wordBasedSuggestions: false, - wordWrap: "bounded", - scrollBeyondLastLine: false, - wordWrapColumn: 80, - folding: false, - occurrencesHighlight: false, - renderLineHighlight: "none", - hideCursorInOverviewRuler: true, - overviewRulerBorder: false, - scrollbar: { - useShadows: false, - horizontal: "hidden", - verticalSliderSize: 5, - }, - }); + const editorOptions = getEditorOptions(options.editor); + const editor = monaco.editor.create(options.editor, editorOptions); const vimMode = options.vim ? initVimMode(editor, options.status) : null; diff --git a/src/components/editor/create/options.ts b/src/components/editor/create/options.ts new file mode 100644 index 0000000..2a7f340 --- /dev/null +++ b/src/components/editor/create/options.ts @@ -0,0 +1,58 @@ +import * as monaco from "monaco-editor"; + +type EditorOptions = monaco.editor.IStandaloneEditorConstructionOptions; + +export const getLeftPadding = (container: HTMLDivElement) => { + const freePadding = container.clientWidth - 1000; + const expected = Math.round(freePadding / 2); + return Math.max(expected, 24); +}; + +const EDITOR_STATIC_OPTIONS: EditorOptions = { + value: "", + language: "markdown", + + ariaLabel: "Main markdown editor", + codeLens: false, + contextmenu: false, + copyWithSyntaxHighlighting: false, + cursorBlinking: "smooth", + cursorSmoothCaretAnimation: true, + cursorSurroundingLines: 3, + cursorWidth: 3, + fontFamily: "iA Writer Duo", + fontLigatures: true, + fontWeight: "450", + glyphMargin: false, + disableMonospaceOptimizations: true, + fontSize: 20, + lineHeight: 40, + lineNumbers: "off", + minimap: { enabled: false }, + padding: { top: 150, bottom: 150 }, + quickSuggestions: false, + roundedSelection: false, + selectionHighlight: false, + smoothScrolling: true, + snippetSuggestions: "none", + suggestOnTriggerCharacters: false, + wordBasedSuggestions: false, + wordWrap: "bounded", + scrollBeyondLastLine: false, + wordWrapColumn: 80, + folding: false, + occurrencesHighlight: false, + renderLineHighlight: "none", + hideCursorInOverviewRuler: true, + overviewRulerBorder: false, + scrollbar: { + useShadows: false, + horizontal: "hidden", + verticalSliderSize: 5, + }, +}; + +export const getEditorOptions = (container: HTMLDivElement): EditorOptions => ({ + ...EDITOR_STATIC_OPTIONS, + lineDecorationsWidth: getLeftPadding(container), +}); diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx index 576fa87..18e2df3 100644 --- a/src/components/editor/editor.tsx +++ b/src/components/editor/editor.tsx @@ -1,7 +1,8 @@ import * as monaco from "monaco-editor"; import { RefObject, useEffect, useRef } from "react"; import { getRef } from "~/src/utils/ref"; -import { createEditor, getLeftPadding } from "./create/create"; +import { createEditor } from "./create/create"; +import { getLeftPadding } from "./create/options"; import "./editor.css"; import s from "./editor.module.css"; import "./font/font.css";