totara / weka-marquee-plugin-example

Example plugin for the Weka editor
0 stars 0 forks source link

About weka totara_notification_placeholder!!!! #1

Open Rookie-baiqi opened 2 weeks ago

Rookie-baiqi commented 2 weeks ago

Hello! I have encountered a problem with the weka editor during development, and I really can't find a solution, so I try to contact you to see if you can help solve my problem. Well, I'm currently developing a text size menu item that can change the size of the text you select, so far only matching text (TextNode), Instead of matching nodes other than text, I'm trying to wrap the dom structure generated by notificationPlaceholder with a div/span tag, which allows me to add some css properties to the Notificationplaceholder so that I can change the size and color of it. But I can't find this node right now, but I can't add layers to it, nor can I add styles, because my text size menu (fontsize.js) is modeled after Emoji.js, and the matching rules are also written by myself. Now the question is how do I wrap this notificationPlaceholder and assign it a css style when I select text size for it, and I'll post the image below and hope to hear from you, any suggestions you might have might be key for me! Thank you very much! image

Rookie-baiqi commented 2 weeks ago

image (3) image (2) image (1)

scq commented 2 weeks ago

Hi @Rookie-baiqi -- I would suggest using a ProseMirror Mark for this, with a text size attribute -- similar to how bold/italic or links work (see text.js). That way you can also use built-in helpers like the setMark command to actually apply the mark to the selection, and don't need to worry about manually finding/creating nodes etc.

Rookie-baiqi commented 2 weeks ago

Hi @Rookie-baiqi -- I would suggest using a ProseMirror Mark for this, with a text size attribute -- similar to how bold/italic or links work (see text.js). That way you can also use built-in helpers like the setMark command to actually apply the mark to the selection, and don't need to worry about manually finding/creating nodes etc.

I think I've found a way, because totara originally has a file called weka_notification_placeholder, and I'm going to use some methods to add attrs to it so that the vue file can get attrs, and then add style to it, I currently try to modify the front-end, and wait for the back-end to see if it can be verified and identified, if it can, then my need is solved! As for the marks you mentioned, because my font size, font color and font background color are created in this way, I also know it, but it is not very appropriate here, because there are already plug-ins, I think it is more difficult for me to add them than the one I have changed now! Because many of the methods are different from the original framework, so it is a bit difficult to read, I hope totara can also improve the relevant documentation! Thank you very much!