IndentedLineWrap.ts 746 B

123456789101112131415161718192021222324252627
  1. import { EditorView } from "@codemirror/view"
  2. const WrappedLineIndenter = EditorView.updateListener.of((update) => {
  3. const view = update.view
  4. const charWidth = view.defaultCharacterWidth
  5. const lineHeight = view.defaultLineHeight
  6. const basePadding = 10
  7. view.viewportLines((line) => {
  8. const domAtPos = view.domAtPos(line.from)
  9. const lineCount = (line.bottom - line.top) / lineHeight
  10. if (lineCount <= 1) return
  11. const belowPadding = basePadding * charWidth
  12. const node = domAtPos.node as HTMLElement
  13. node.style.textIndent = `-${belowPadding - charWidth + 1}px`
  14. node.style.paddingLeft = `${belowPadding}px`
  15. })
  16. })
  17. export const IndentedLineWrapPlugin = [
  18. EditorView.lineWrapping,
  19. WrappedLineIndenter,
  20. ]