jspaine / quill-placeholder-module Goto Github PK

i have added CSS to display placeholder by targeting .ql-placeholder-content class
it is displaying the styles on adding placeholder but as soon as i try to edit placeholder. it clears up the placeholder and removes focus from the quill editor.

I've tried to emulate this possible solution here in order to dynamically update placeholder options, but the click functionality seems to disappear when you add a new one. I think it's because these are registered when the module is created. Would be good to get this working dynamically.

If you play around with adding text, adding placeholders (required and non) and pressing delete enough, pretty quickly it starts to bug out and you see duplicate placeholders. Also seems to make the text-cursor disappear, but this solution might solve this particular secondary issue.

I´d posted a topic on stackoverflow, with my error. If anyone can help me, to solve, I´ll be very thankfull.

https://stackoverflow.com/questions/76320652/primeng-editor-how-to-register-quill-placeholder-module

The error I´m getting when tried to register it directly on quill inside Primeng Component, is in the image below.

The line it occurs is on:

function getPlaceholderModule(Quill, options) {
    var Parchment = Quill.import('parchment'); <- this line

I'm trying to inform the users to press the RTL icon to change the writing direction.
Because most users are not familiar with the RTL Icon I wanted to insert it in the placeholder text but so far I can't make it work.

My Code
var quill = new Quill('#editor', { modules: { toolbar: toolbarOptions }, placeholder: 'Write your text here. \nFor Arabic or Kurdish, just press the reveresed "P<" at the end of the toolbar...', theme: 'snow' });

Is there no browser base distribution... I don't like modules or using node

Hi, first off let me say: This is an awesome plugin and it works perfectly :-)

Well, except for this one issue I have with it:
When I have some default source that contains span elements (using react-quill, not sure if that makes a difference), the className property in the blot seems to be set too late to pick it up. Therefore all existing span elements are being converted. As I use inline styles instead of classes for all attributes like size, color, background etc., it is a real issue for me.

I forked your repo and played around a bit and it seems that when I set the className prop explicitly in the src/placeholder-blot.ts, it works just fine and it doesn't try to take over the existing spans (just the ones with the class as intended!).

// ....
  class PlaceholderBlot extends Embed {
    static blotName = 'placeholder'
    static tagName = 'span'
    static className: string = 'ql-placeholder-content'
    static delimiters: Array<string>
    public domNode: HTMLElement
// ....

I'm not sure what can be done as I'm not that familiar with Quill yet, but just changing the register of the blot inside the module constructor didn't work.

Thanks for your great work!

This issue can be reproduced in the Demo.

Just set the content below, You'll see the spaces between two placeholders will be removed. Any workaround for this?

// setting content with a placeholder
quill.clipboard.dangerouslyPasteHTML('<span class="ql-placeholder-content" data-id="foo" data-label="foo"></span>         &nbsp;<span class="ql-placeholder-content" data-id="foo" data-label="foo"></span>')

I was looking for something like:

{someplaceholder || 'default value'}

where the user can type a default value with a provided syntax so, that i can leverage the default value and no errors occur during absence of placeholder value.

I noticed that, placeholder wrapper has been set with contenteditable attribute as false as shown:
wrapper.setAttribute('contenteditable', 'false')

I am well aware that this saves a lot of time with validating syntax for placeholders, but it would have been nice if you allowed options to control this behavior which obviously defaults to false.

Hi, I believe that wrapping the node contents into a span with contenteditable="false" is unnecessary, I might be wrong though.

I believe that a similar code to this:

const wrapper = document.createElement('span')
wrapper.setAttribute('contenteditable', 'false')
wrapper.appendChild(labelNode)

can be found in the blots/embed constructor, of which the PlaceholderBlot class inherits. My placeholders are therefore being double wrapped.

I might be wrong though, as I said in the other issue - I'm not too familiar with Quill yet :)

Hello,
Is it possible to have placeholder drop-down scroll within the existing window (or with a specified height for drop-down )? I am experimenting placeholder functionality for 50+ fields and the UI today just opens all fields in a long drop-down.

Thanks!

I don't know if I missed something or use Quill the wrong way.
When there is initial content passed to my instance, I don't have my placeholders parsed as corresponding PlaceholderBlot.
Do you have an idea of how implement that easily?

The VueQuill documentation lists your package as a module that should work with VueQuill. I can't seem to get it working. Here is what I did to implement this module into my VueQuill setup as per their documentation. I'm trying to figure out if the package isn't compatible or if I'm missing something. Any help would be greatly appreciated. Thanks!

<script setup>
import { QuillEditor } from '@vueup/vue-quill'
import Placeholder from 'quill-placeholder-module';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const modules = {
    name: 'placeholder',
    module: Placeholder,
    options: {
        placeholders: [
            {id: 'foo', label: 'Foo'},
            {id: 'required', label: 'Required', required: true}
        ],
    },
};
</script>

<template>
    <Head title="Send Email" />

    <FormLayout>
        <div class="absolute right-6 top-6">
            <QuillEditor v-model="form.body" :modules="modules" :content="form.body" contentType="html" />
        </div>
    </FormLayout>
</template>

And here is the error in the console:

TypeError: Quill.import is not a function
    at new getPlaceholderModule (quill-placeholder-module.js?v=63e4ae51:87:43)
    at SnowTheme2.addModule (chunk-G7VXOX5J.js?v=63e4ae51:6244:40)
    at SnowTheme2.addModule (chunk-G7VXOX5J.js?v=63e4ae51:6962:136)
    at chunk-G7VXOX5J.js?v=63e4ae51:6236:29
    at Array.forEach (<anonymous>)
    at SnowTheme2.init (chunk-G7VXOX5J.js?v=63e4ae51:6234:53)
    at new Quill2 (chunk-G7VXOX5J.js?v=63e4ae51:1139:28)
    at initialize (@vueup_vue-quill.js?v=63e4ae51:1295:15)
    at @vueup_vue-quill.js?v=63e4ae51:1273:7
    at chunk-U6BEPC57.js?v=63e4ae51:4328:88

I have found that inconsistently, if you click and put the cursor after the last placeholder and then insert a new placeholder via the dropdown options, the new placeholder is placed before the last placeholder, not after. The cursor then moves to before the last placeholder, too.

I am using:

quill-placeholder-module@npm:0.3.1
react-quill@npm:2.0.0
quill@npm:1.3.7

This is reproducible using the CodePen demo linked to from the repo.

When I have multiple editors on the page, the js injection into the placeholder dropdown in the toolbar seems to break - the markup for the dropdown is there, but all the options are empty. When I click on a dropdown option it still inserts the placeholder correctly, but when I look in the inspector there are no text nodes in the dropdown.

I am initializing each quill editor with unique IDs and the rest of the editor is working fine.

Is it possible somehow to insert placeholder without using toolbar?

I want to create buttons to insert placeholders, how to do it?