wip

Author: luin

packages/quill/src/blots/cursor.ts

@@ -72,7 +72,14 @@ class Cursor extends EmbedBlot {
     this.parent = null;
   }
 
+  resetText() {
+    const newText = this.textNode.data.split(Cursor.CONTENTS).join('');
+    this.textNode.data = Cursor.CONTENTS;
+    return newText;
+  }
+
   restore(): EmbedContextRange | null {
+    return;
     if (this.selection.composing || this.parent == null) return null;
     const range = this.selection.getNativeRange();
     // Browser may push down styles/nodes inside the cursor blot.

packages/quill/src/blots/embed.ts

@@ -37,6 +37,7 @@ class Embed extends EmbedBlot {
   }
 
   restore(node: Text): EmbedContextRange | null {
+    return;
     let range: EmbedContextRange | null = null;
     let textNode: Text;
     const text = node.data.split(GUARD_TEXT).join('');

packages/quill/src/core.ts

@@ -22,6 +22,7 @@ import Keyboard from './modules/keyboard.js';
 import Uploader from './modules/uploader.js';
 import Delta, { Op, OpIterator, AttributeMap } from 'quill-delta';
 import Input from './modules/input.js';
+import CursorModule from './modules/cursor.js';
 import UINode from './modules/uiNode.js';
 
 export { default as Module } from './core/module.js';
@@ -50,6 +51,7 @@ Quill.register({
   'modules/keyboard': Keyboard,
   'modules/uploader': Uploader,
   'modules/input': Input,
+  'modules/cursor': CursorModule,
   'modules/uiNode': UINode,
 });
 

packages/quill/src/core/quill.ts

@@ -228,6 +228,7 @@ class Quill {
     this.history = this.theme.addModule('history');
     this.uploader = this.theme.addModule('uploader');
     this.theme.addModule('input');
+    // this.theme.addModule('cursor');
     this.theme.addModule('uiNode');
     this.theme.init();
     this.emitter.on(Emitter.events.EDITOR_CHANGE, (type) => {

packages/quill/src/modules/cursor.ts

@@ -0,0 +1,106 @@
+import Delta from 'quill-delta';
+import Module from '../core/module.js';
+import Quill from '../core/quill.js';
+import CursorBlot from '../blots/cursor.js';
+import type { Range } from '../core/selection.js';
+import { deleteRange } from './keyboard.js';
+import Embed from '../blots/embed.js';
+
+const INSERT_TYPES = ['insertText', 'insertReplacementText'];
+
+class Cursor extends Module {
+  constructor(quill: Quill, options: Record<string, never>) {
+    super(quill, options);
+
+    quill.root.addEventListener('beforeinput', (event) => {
+      this.handleBeforeInput(event);
+    });
+
+    quill.emitter.on(Quill.events.COMPOSITION_END, () => {
+      this.quill.update(Quill.sources.USER);
+
+      const selection = document.getSelection();
+      if (selection == null || selection.rangeCount <= 0) return null;
+      const node = selection.getRangeAt(0).startContainer;
+      const blot = quill.scroll.find(node, true);
+      if (blot instanceof CursorBlot) {
+        this.restoreCursor(blot, blot.resetText());
+      }
+    });
+  }
+
+  private restoreCursor(cursor: CursorBlot, text: string) {
+    const offset = cursor.offset(this.quill.scroll);
+    const formats = this.quill.getFormat(offset);
+    this.quill.insertText(offset, text, formats, Quill.sources.USER);
+    cursor.remove();
+    this.quill.update(Quill.sources.SILENT);
+    this.quill.setSelection(offset + text.length, 0, Quill.sources.SILENT);
+  }
+
+  private restoreEmbed(embed: Embed, side: 'left' | 'right', text: string) {
+    const offset = embed.offset(this.quill.scroll) + (side === 'left' ? 0 : 1);
+    const formats = this.quill.getFormat(offset);
+    this.quill.insertText(offset, text, formats, Quill.sources.USER);
+    this.quill.update(Quill.sources.SILENT);
+    this.quill.setSelection(offset + text.length, 0, Quill.sources.SILENT);
+  }
+
+  private handleBeforeInput(event: InputEvent) {
+    if (this.quill.composition.isComposing || event.defaultPrevented) {
+      return;
+    }
+
+    if (event.inputType !== 'insertText') {
+      return;
+    }
+
+    const staticRange = event.getTargetRanges
+      ? event.getTargetRanges()[0]
+      : null;
+    if (!staticRange || !staticRange.collapsed) {
+      return;
+    }
+
+    const text = getPlainTextFromInputEvent(event);
+    if (text == null) {
+      return;
+    }
+
+    const blot = this.quill.scroll.find(staticRange.startContainer, true);
+    console.log(blot);
+
+    this.quill.update(Quill.sources.USER);
+
+    if (blot instanceof CursorBlot) {
+      this.restoreCursor(blot, text);
+      event.preventDefault();
+    } else if (blot instanceof Embed) {
+      this.restoreEmbed(
+        blot,
+        blot.leftGuard === staticRange.startContainer ? 'left' : 'right',
+        text,
+      );
+      event.preventDefault();
+    }
+  }
+}
+
+function getPlainTextFromInputEvent(event: InputEvent) {
+  // When `inputType` is "insertText":
+  // - `event.data` should be string (Safari uses `event.dataTransfer`).
+  // - `event.dataTransfer` should be null.
+  // When `inputType` is "insertReplacementText":
+  // - `event.data` should be null.
+  // - `event.dataTransfer` should contain "text/plain" data.
+
+  if (typeof event.data === 'string') {
+    return event.data;
+  }
+  if (event.dataTransfer?.types.includes('text/plain')) {
+    return event.dataTransfer.getData('text/plain');
+  }
+  return null;
+}
+
+export default Cursor;