datananas/quill-placeholder-autocomplete

brings autocomplete to Quill Placeholder module

quill-placeholder-autocomplete's Issues

When hitting "enter" to complete, enter is added to the document

When completing a placeholder, if you type "enter", then a carriage return is added to the document being edited:

I'm trying to modify this module so I can use "{" as my trigger key, but then also use "}" as the end-key in addition to enter, that way you can just type {name} to insert the name placeholder. Only, as things stand, I end up inserting {name}} into the document.

Cannot read properties of null (reading 'index')

I'm using react (with hooks, not classes) and React Quill.

I have the code:

import ReactQuill, { Quill } from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import getPlaceholderModule from 'quill-placeholder-module';
import getAutocompleteModule from 'quill-placeholder-autocomplete-module';

Quill.register('modules/placeholder', getPlaceholderModule(Quill, { className: 'ql-placeholder-content' }));
Quill.register('modules/autocomplete', getAutocompleteModule(Quill));

function TextEditor({ onChange, value }) {
  const placeholders = [
    { id: 'foo', label: 'Foo' },
    { id: 'required', label: 'Required', required: true },
  ];

  const modules = {
    toolbar: [
      [{ header: [1, 2, false] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [
        { list: 'ordered' },
        { list: 'bullet' },
        { indent: '-1' },
        { indent: '+1' },
      ],
      ['link', 'image'],
      ['clean'],
    ],
    placeholder: [{ delimiters: ['{', '}'], placeholders }],
    autocomplete: [
      {
        getPlaceholders: () => placeholders,
        container: '#completions',
        triggerKey: '#',
        endKey: '#',
        debounceTime: 0,
      },
    ],
  };

  const handleChange = (val: string) => {
    onChange(val);
  };

  return (
    <div style={{ maxWidth: '100%' }}>
      <ReactQuill
        value={value || ''}
        style={{
          height: '250px',
          marginBottom: '50px',
          maxWidth: '100%',
        }}
        modules={modules}
        theme="snow"
        onChange={handleChange}
      />
    </div>
  );
}

export default TextEditor;

When I type "#" there is an error that says: Cannot read properties of null (reading 'index').

More in detail:

quill-placeholder-autocomplete-module.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'index')
    at n.value (quill-placeholder-autocomplete-module.min.js:1)
    at HTMLDivElement.<anonymous> (quill-placeholder-autocomplete-module.min.js:1)

How can I solve this? Thanks.

Placeholders with uppercase characters never displayed

If you have placeholders containing uppercase characters, they are never displayed in the list of suggestions. The problem appears to be because the labels being passed into FuzzySet here are being lower-cased. So when retrieving the results from FuzzySet, the results will also be lowercase, and will never match any uppercase-containing placeholders when filtering here.

The thing is, I don't think you need to lowercase the values passed to FuzzySet. FuzzySet normalizes the values (i.e., does it's own lower-casing) for the purposes of matching, and will return the original labels in the results.