feat: line placeholder

src/index.ts

@@ -19,6 +19,16 @@ export class QuillQuickInsert {
     this.currentMenu = this.options.menuItems;
     this.menuSorter = this.createMenuItemsSorter(this.options.menuItems);
 
+    this.placeholderDisplay();
+
+    this.quill.on(Quill.events.COMPOSITION_START, () => {
+      this.placeholderDisplay();
+    });
+    this.quill.on(Quill.events.EDITOR_CHANGE, (type: string) => {
+      if (type === Quill.events.SELECTION_CHANGE) {
+        this.placeholderDisplay();
+      }
+    });
     this.quill.on(Quill.events.TEXT_CHANGE, () => {
       const range = this.quill.getSelection();
       if (range) {
@@ -49,6 +59,7 @@ export class QuillQuickInsert {
 
   resolveOptions(options: Partial<QuillQuickInsertInputOptions>): QuillQuickInsertOptions {
     const result = Object.assign({
+      placeholder: 'Input / recall menu',
       menuItems: [] as any[],
     }, options);
     result.menuItems = result.menuItems.map((item) => {
@@ -60,6 +71,21 @@ export class QuillQuickInsert {
     return result;
   }
 
+  placeholderDisplay() {
+    const placeholders = Array.from(this.quill.root.querySelectorAll(':scope > p[data-placeholder]')) as HTMLElement[];
+    for (const item of placeholders) {
+      delete item.dataset.placeholder;
+    }
+
+    const range = this.quill.getSelection(true);
+    if (range && range.length === 0) {
+      const [line] = this.quill.getLine(range.index);
+      if (line && line.length() === 1) {
+        line.domNode.dataset.placeholder = this.options.placeholder;
+      }
+    }
+  }
+
   createMenuItemsSorter(items: Menu) {
     const list: MenuItems[] = [];
     for (const item of items) {

src/style/index.scss

@@ -1 +1,24 @@
 @use './menu.scss' as *;
+
+.ql-editor {
+  > p[data-placeholder] {
+    position: relative;
+    &::before {
+      content: attr(data-placeholder);
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      padding-left: 4px;
+      user-select: none;
+      pointer-events: none;
+      white-space: nowrap;
+      font-size: 14px;
+      color: #d8dad9;
+    }
+    &.ql-align-right {
+      &::before {
+        right: 4px;
+      }
+    }
+  }
+}

src/utils/types.ts

@@ -19,10 +19,11 @@ export interface MenuItemsGroup {
 }
 export type Menu = (MenuItems | MenuItemsGroup)[];
 
-export interface QuillQuickInsertInputOptions {
+export interface QuillQuickInsertInputOptions extends Omit<QuillQuickInsertOptions, 'menuItems'> {
   menuItems: ((Omit<MenuItems, 'type'> & { type?: 'item' }) | MenuItemsGroup)[];
 }
 
 export interface QuillQuickInsertOptions {
   menuItems: (MenuItems | MenuItemsGroup)[];
+  placeholder: string;
 }