Develop Reference

How to add an action opening a dropdown menu in Monaco Editor?

I know how to add an entry in the context menu of the Monaco editor, with editor.addAction. How to add an action which opens a dropdown list, as the "Command Palette" action?

As mentioned in this issue, the quick-open api is not yet implemented in monaco-editor. But after a series of in-depth research, I found a somewhat hacker solution.
First, you need to import IQuickInputService like below.
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';
Then, create our editor.
// Create your editor instance...
let editor = monaco.editor.create(
// ...
);
// Add a new command, for getting an accessor.
let quickInputCommand = editor.addCommand(0, (accessor, func) => {
// a hacker way to get the input service
let quickInputService = accessor.get(IQuickInputService)
func(quickInputService)
});
Finally, as an example, we can add an action.
editor.addAction({
id: "myQuickInput",
label: "Test Quick Input",
run: (editor) => {
// create quick input
editor.trigger("", quickInputCommand, (quickInput) => {
quickInput.pick([
{
type: 'item',
id: "my_quick_item",
label: "MyQuickItem",
},
{
type: 'item',
id: "my_quick_item2",
label: "MyQuickItem2",
},
{
type: 'item',
id: "my_quick_item3",
label: "MyQuickItem3",
},
]).then((selected) => {
console.log(selected)
})
})
}
})
For the interface of IQuickInputService, please refer to here here
If you do it right, when you run the action, you should get the same result as I did.

Quill - Mention not inserting mention value in Quill JS editor content (Using React Quill)

I'm implementing Quill-Mention in Quill JS, using React Quill but I can't manage to update editor content when clicking an item from the list.
I can properly render the list when clicking the right symbol and it shows data accordingly. But, when I click it, it disappears and the item value is not added to editor content.
Here is how I'm testing it:
const suggestPeople = searchTerm => {
const allPeople = [
{
id: 1,
value: "Fredrik Sundqvist"
},
{
id: 2,
value: "Patrik Sjölin"
}
];
return allPeople.filter(person => person.value.includes(searchTerm));
};
/* Mention module config
====================== */
const mentionModule = {
allowedChars: /^[A-Za-z\sÅÄÖåäö]*$/,
mentionDenotationChars: ["·"],
source: async function(searchTerm, renderList) {
const matchedPeople = await suggestPeople(searchTerm);
renderList(matchedPeople);
}
};
Quill.register("modules/mentions", QuillMention);
const modules = {
syntax: true,
clipboard: {
matchVisual: false
},
toolbar: {
container: "#toolbar",
},
mention: mentionModule
};
Screenshot showing Quill Mention dropdown list working
Thank you!

I solved it.
I needed to add the onSelect method in the config object plus add "mention" as an element of the formats array.
Thank you either way :)

Spaces are not recognized correctly in the TipTap Editor

we use the rich text editor of TipTap in our project.
But we have the problem, that spaces are not recognized correctly and only after every 2 click a space is created. As framework we use Vue.JS.
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
HardBreak,
Heading,
OrderedList,
BulletList,
ListItem,
Bold,
Italic,
History
} from 'tiptap-extensions'
import EditorMenuButton from './EditorMenuButton.vue'
export default {
name: 'editor',
components: {
EditorMenuButton,
EditorMenuBar,
EditorContent
},
props: {
value: {
type: null,
default: ' '
}
},
data () {
return {
innerValue: ' ',
editor: new Editor({
extensions: [
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
new BulletList(),
new OrderedList(),
new ListItem(),
new Bold(),
new Italic(),
new History()
],
content: `${this.innerValue}`,
onUpdate: ({ getHTML }) => {
this.innerValue = getHTML()
}
})
}
},
watch: {
// Handles internal model changes.
innerValue (newVal) {
this.$emit('input', newVal)
},
// Handles external model changes.
value (newVal) {
this.innerValue = newVal
this.editor.setContent(this.innerValue)
}
},
mounted () {
if (this.value) {
this.innerValue = this.value
this.editor.setContent(this.innerValue)
}
},
beforeDestroy () {
this.editor.destroy()
}
}
</script>
does anyone have any idea what could be the reason for assuming only every two spaces?

We had the same problem, we kept the onUpdate trigger but changed the watch so that it would only invoke editor.setContent when the value was actually different.
watch: {
value() {
let html = this.editor.getHTML();
if (html !== this.value) {
this.editor.setContent(this.value);
}
},
},

"Okay the problem is that the watcher will get fired when you type in the editor. So this will check if the editor has focus an will only update the editor content if that's not the case."
watch: {
value(val) {
if (!this.editor.focused) {
this.editor.setContent(val, false);
}
}
},
issue: https://github.com/ueberdosis/tiptap/issues/776#issuecomment-667077233

This bug for me was caused by doing something like this:
watch: {
value: {
immediate: true,
handler(newValue) {
this.editor.setContent(newValue)
},
},
},
Removed this entirely and the bug went away. Maybe this will help someone in future.

Remove onUpdate section and the bug will disapear. I don't know why, but it's interesting to know how to reproduce the bug.
That does help. Following this advice, I am currently using the onBlur event instead of onUpdate, while obtaining the content's HTML using the editor instance and the getHTML() function, as such: this.editor.getHTML().
(In my case I $emit this value in order for it to be reactive to my parent component, but that may be irrelevant for the original question).

Maybe you should try this.
watch: {
// Handles external model changes.
value (newVal) {
// convert whitespace into \u00a0 ->
let content = newVal.replace(/\s/g, "\u00a0");
this.editor.setContent(content)
}
},
It seems like the normal white space has been removed by html automatically. Therefore, I convert whitespace into 'nbsp;' and it's worked.

The code you provided seems to be working just fine. So the issue most likely is produced by a side effect in either your code or some dependency.
To debug this issue you could look for event listeners, especially regarding key press or key down events and looking if you are checking for space key specifically somewhere (event.keyCode === 32 or event.key === " "). In conjunction with event.preventDefault this could explain such an issue.
Another more broad way to debug this is to strip away parts from your code until the bug disappears or add to a minimal example until the bug appears.

Remove onUpdate section and the bug will disapear. I don't know why, but it's interessing to know how to reproduce the bug.
However if you create a "minimal reproductible example" the bug does not appear.
So what ? I don't know.
I found a workaround which is to use vuex.
Rather than assign the value returned by getHTML() in the innerValue variable and then issue an 'input' event, I put this value in the store.

Selenium - How to send input from div > input by id?

So I am having an issue where I am trying to input a text to a input field but I realized that there is two same id by the same id name and I am here looking for help on how to specifiy which div -> input I would like to use.
What I did so far was:
it('Entering First Name', function (done) {
browser.driver
.then(() => browser.wait(EC.visibilityOf(element(by.xpath('//input[#id="pp-cc-first-name-field"]'))), 50000, "Timed out finding 'First Name' element"))
.then(() => element(by.xpath('//input[#id="pp-cc-first-name-field"]')).sendKeys("hello world")
.then(() => done());
});
with using this HTML
So I am not sure what I am actually doing wrong in this case because right now it doesn't input anything and fails due to time out. I would like to wish to input any text to this specific element.
EDIT!
It looked like I had to switch to iframe due to there is a iframe loaded on the background which was the reason I wasn't able to actually write on the field. I had to use
browser.switchTo().frame(element(by.xpath("//iframe[#id='cc-integrated-payment-page-frame']")).getWebElement()))
to be able to write inside the fields.

The IDs of your elements are not the same, <div> has pp-cc-first-name-field value, and <input> pp-cc-first-name-field value.
Try to fix it as follows:
it('Entering First Name', function (done) {
browser.driver
.then(() => browser.wait(EC.visibilityOf(element(by.id('pp-cc-first-name'))), 50000, "Timed out finding 'First Name' element"))
.then(() => element(by.id('pp-cc-first-name')).sendKeys("hello world")
.then(() => done());
});

To input a character sequence within the input field you can use either of the following Locator Strategies:
Using css_selector:
input#pp-cc-first-name[name='First name'][placeholder='First name']
Using xpath:
//input[#id='pp-cc-first-name' and #name='First name'][#placeholder='First name']
Effectively, your modified code block will be:
it('Entering First Name', function (done) {
browser.driver
.then(() => browser.wait(EC.visibilityOf(element(by.xpath('//input[#id="pp-cc-first-name" and #name="First name"][#placeholder="First name"]'))), 10, "Timed out finding 'First Name' element"))
.then(() => element(by.xpath('//input[#id="pp-cc-first-name" and #name="First name"][#placeholder="First name"]')).sendKeys("hello world")
.then(() => done());
});

Update source for multiple CKEditor5 instances

I have several fields on a form. Some of them are simple inputs, others are datetimepickers, a few of them are CKEditors. I handle the form submit manually, so I need to manually update the source fields for the CKEditor instances to get all modification before I save it to a MySQL database. I put all the instances to an array (I see its content in Chrome's web developer tool), but when I try to use destroy or updateSourceElement methods on one item from this array, I get "TypeError, item.updateSourceElement is not a function" messages.
I use this code:
const CKeditors = {};
...
function createEditor( elementId ) {
return ClassicEditor
.create( document.querySelector( elementId ),
{
toolbar: [ "heading", "|", "bold", "italic", "link", "bulletedList", "numberedList"]
})
.then( editor => {
CKeditors[ elementId ] = editor;
})
.catch( err => console.error( err.stack ) );
}
createEditor("#'.$mezo['mezonev'].'_tartalom"); // $mezo['mezonev'].'_tartalom is the unique name of the input field
function submitAllCKeditors(){
for (item in CKeditors)
{
item.updateSourceElement();
}
}
...
and somewhere later when I handle the onlick event, I call "submitAllCKeditors();" I see the array's content with the proper ids, but I get error for the item.updateSourceElement();
What am I doing wrong?