More editor related migration 🧞‍♀️😲

src/js/editor/editor.ts

@@ -193,6 +193,7 @@ export default class Editor implements EditorOptions {
   unknownAtomHandler!: CardRenderHook
   mobiledoc!: Option<Mobiledoc>
   html!: Option<string>
+  text!: Option<string>
   tooltipPlugin!: TooltipPlugin
 
   _views: View[]

src/js/editor/selection-change-observer.js → src/js/editor/selection-change-observer.ts

@@ -1,10 +1,20 @@
-let instance
+import { PartialSelection } from "../utils/selection-utils"
+
+let instance: SelectionChangeObserver
+
+export interface SelectionChangeListener {
+  selectionDidChange(nextSelection: PartialSelection, prevSelection: PartialSelection): void
+}
 
 class SelectionChangeObserver {
+  started: boolean
+  listeners: SelectionChangeListener[]
+  selection: PartialSelection
+
   constructor() {
     this.started = false
     this.listeners = []
-    this.selection = {}
+    this.selection = {} as PartialSelection
   }
 
   static getInstance() {
@@ -14,22 +24,22 @@ class SelectionChangeObserver {
     return instance
   }
 
-  static addListener(listener) {
+  static addListener(listener: SelectionChangeListener) {
     SelectionChangeObserver.getInstance().addListener(listener)
   }
 
-  addListener(listener) {
+  addListener(listener: SelectionChangeListener) {
     if (this.listeners.indexOf(listener) === -1) {
       this.listeners.push(listener)
       this.start()
     }
   }
 
-  static removeListener(listener) {
+  static removeListener(listener: SelectionChangeListener) {
     SelectionChangeObserver.getInstance().removeListener(listener)
   }
 
-  removeListener(listener) {
+  removeListener(listener: SelectionChangeListener) {
     let index = this.listeners.indexOf(listener)
     if (index !== -1) {
       this.listeners.splice(index, 1)
@@ -50,12 +60,12 @@ class SelectionChangeObserver {
 
   stop() {
     this.started = false
-    this.selection = {}
+    this.selection = {} as Selection
   }
 
-  notifyListeners(/* newSelection, prevSelection */) {
+  notifyListeners(newSelection: PartialSelection, prevSelection: PartialSelection) {
     this.listeners.forEach(listener => {
-      listener.selectionDidChange(...arguments)
+      listener.selectionDidChange(newSelection, prevSelection)
     })
   }
 
@@ -64,8 +74,8 @@ class SelectionChangeObserver {
     this.listeners = []
   }
 
-  getSelection() {
-    let selection = window.getSelection()
+  getSelection(): PartialSelection {
+    let selection = window.getSelection()!
     let { anchorNode, focusNode, anchorOffset, focusOffset } = selection
     return { anchorNode, focusNode, anchorOffset, focusOffset }
   }
@@ -77,20 +87,20 @@ class SelectionChangeObserver {
     }
   }
 
-  runNext(fn) {
+  runNext(fn: FrameRequestCallback) {
     window.requestAnimationFrame(fn)
   }
 
   update() {
     let prevSelection = this.selection
-    let curSelection = this.getSelection()
+    let curSelection = this.getSelection()!
     if (!this.selectionIsEqual(prevSelection, curSelection)) {
       this.selection = curSelection
       this.notifyListeners(curSelection, prevSelection)
     }
   }
 
-  selectionIsEqual(s1, s2) {
+  selectionIsEqual(s1: PartialSelection, s2: PartialSelection) {
     return (
       s1.anchorNode === s2.anchorNode &&
       s1.anchorOffset === s2.anchorOffset &&

src/js/editor/selection-manager.ts

@@ -0,0 +1,41 @@
+import SelectionChangeObserver from '../editor/selection-change-observer'
+import Editor from './editor'
+import { PartialSelection } from '../utils/selection-utils'
+
+type SelectionManagerCallback = (curSelection: PartialSelection, prevSelection: PartialSelection) => void
+
+export default class SelectionManager {
+  editor: Editor
+  callback: SelectionManagerCallback
+  started: boolean
+
+  constructor(editor: Editor, callback: SelectionManagerCallback) {
+    this.editor = editor
+    this.callback = callback
+    this.started = false
+  }
+
+  start() {
+    if (this.started) {
+      return
+    }
+
+    SelectionChangeObserver.addListener(this)
+    this.started = true
+  }
+
+  stop() {
+    this.started = false
+    SelectionChangeObserver.removeListener(this)
+  }
+
+  destroy() {
+    this.stop()
+  }
+
+  selectionDidChange(curSelection: PartialSelection, prevSelection: PartialSelection) {
+    if (this.started) {
+      this.callback(curSelection, prevSelection)
+    }
+  }
+}

src/js/editor/text-input-handler.ts

@@ -0,0 +1,102 @@
+import { endsWith } from '../utils/string-utils'
+import assert from '../utils/assert'
+import deprecate from '../utils/deprecate'
+import { ENTER } from '../utils/characters'
+import Editor from './editor'
+import Markerable from '../models/_markerable'
+import { Maybe } from '../utils/types'
+
+class TextInputHandler {
+  editor: Editor
+  _handlers: TextInputHandlerListener[]
+
+  constructor(editor: Editor) {
+    this.editor = editor
+    this._handlers = []
+  }
+
+  register(handler: TextInputHandlerListener) {
+    assert(`Input Handler is not valid`, this._validateHandler(handler))
+    this._handlers.push(handler)
+  }
+
+  unregister(name: string) {
+    let handlers = this._handlers
+    for (let i = 0; i < handlers.length; i++) {
+      if (handlers[i].name === name) {
+        handlers.splice(i, 1)
+      }
+    }
+  }
+
+  handle(string: string) {
+    let { editor } = this
+
+    editor.insertText(string)
+
+    let matchedHandler = this._findHandler()
+    if (matchedHandler) {
+      let [handler, matches] = matchedHandler
+      handler.run(editor, matches)
+    }
+  }
+
+  handleNewLine() {
+    let { editor } = this
+
+    let matchedHandler = this._findHandler(ENTER)
+    if (matchedHandler) {
+      let [handler, matches] = matchedHandler
+      handler.run(editor, matches)
+    }
+  }
+
+  _findHandler(string = ''): Maybe<[TextInputHandlerListener, string[]]> {
+    const { editor } = this
+    const { range } = editor
+    const { head } = range
+    const { section } = head
+
+    let preText = (section! as unknown as Markerable).textUntil(head) + string
+
+    for (let i = 0; i < this._handlers.length; i++) {
+      let handler = this._handlers[i]
+
+      if (('text' in handler) && endsWith(preText, handler.text)) {
+        return [handler, [handler.text]]
+      } else if (('match' in handler) && handler.match.test(preText)) {
+        return [handler, handler.match.exec(preText)!]
+      }
+    }
+  }
+
+  _validateHandler(handler: TextInputHandlerListener) {
+    deprecate('Registered input handlers require a "name" property so that they can be unregistered', !!handler.name)
+    return (
+      !!handler.run && // has `run`
+      (!!(handler as TextHandler).text || !!(handler as MatchHandler).match) && // and `text` or `match`
+      !(!!(handler as TextHandler).text && !!(handler as MatchHandler).match)
+    ) // not both `text` and `match`
+  }
+
+  destroy() {
+    this._handlers = []
+  }
+}
+
+interface BaseHandler {
+  name: string
+  run: (editor: Editor, matches: string[]) => void
+}
+
+interface TextHandler extends BaseHandler {
+  text: string
+}
+
+interface MatchHandler extends BaseHandler {
+  match: RegExp
+}
+
+export type TextInputHandlerListener = TextHandler | MatchHandler
+
+export default TextInputHandler

src/js/models/_has-child-sections.ts

@@ -1,10 +1,11 @@
 import LinkedList from '../utils/linked-list'
 import Section from './_section'
 
-type HasChildSections<T extends Section = Section> = T & {
+type HasChildSections<T extends Section = Section> = {
   sections: LinkedList<T>
 }
 
+// eslint-disable-next-line no-undef
 export default HasChildSections
 
 export function hasChildSections(section: {}): section is HasChildSections {