How can I convert one model attribute to another model attribute in ckEditor5? - ckeditor5

I'm setting up the Mentions plugin and want it to behave such that inserting a Mention (from the dropdown menu) inserts text with a link, and that link remains even if you edit the text.
By default, if you edit the text of the mention, ckEditor removes the mention/link.
My guess of the best way to do this is to convert the Mention attribute in the Model to a linkHref attribute. Is there a way to do this?
I'm aware of upcast and downcast conversion, but modifying these doesn't do what I want. It seems we really need a modification of a model.
(Commenting out lines 61 and 63 in [mentionediting.js][1] can actually prevent the undesired behavior, but this doesn't seem like the ideal solution to the problem.)

Related

Is there a way to highlight required input fields in Vue Formulation?

So I am trying to create a form using Vue Formulation. I have a few input fields that are required. Is it even possible to highlight them somehow? I have read Vue Formulation doc, but could not find the answer.
You could simply give the required fields a different styling/CSS class.
If you are really fancy, you could try to read the attributes of the DOM elements (with attr() or refs), but haven't tried that and it is probably not worthwhile.

How to make IntelliJ Idea stop warning about certain attributes?

I'm developing a Vue app using UI Kit which implies using various custom attributes like uk-grid, uk-icon, uk-navbar etc (in Vue single file components' templates). For each one, IntelliJ gives me a warning like
Warning:(7, 52) Attribute uk-icon is not allowed here
How can I tell IntelliJ not to do this? Googling the warning haven't brought any sane results which makes me think there's no ready-to-use package for this (for this particular UI Kit), so the question is: how to make Idea not to warn about a custom list of attributes? But I'll be glad to be wrong and if there is a better solution, please let me know.
Update: like lena has suggested, pressing alt+enter suggests helpful options, including adding attribute to the list of custom attributes. However, wildcard suggestion didn't work for me: the below screenshot illustrates settings that make v-localize attrbute be recognized, but uk--prefixed attribute are still highlighted with warning:
You can add uk-* attributes to Custom HTML tag attributes list in HTML | Unknown HTML tag attribute inspection; the easiest way to do this is using Add to custom HTML attributes quickfix available on Alt+Enter:
Note that IDEA recognizes Vuikit components and directives out of the box - did you consider using it instead of pure UIKit?

Tagging specific parts of QTextDocument

I have to edit a document which has been tagged semantically.
Assume I have an HTML document where some or all paragraphs (or span) have been tagged with a specific class name, something like: <p class="bio"><span class="name">John</span><span class="surname">Doe</span>is a <span class="job">carpenter</span> living in <span class="place">York</span>.</p><p class="story">He was working at his bench when...</p>
I want to use a QTextEdit widget to edit such text (if possible).
Additional requirements are:
Each class should have specific graphic rendering (this should be easy using CSS).
Editing specific <span> should preserve class (i.e.: if I edit "John" -> "Jonathan" it should still have class="name").
I should be able to apply class to specific pieces of text (i.e.: select some text, open a context menu and select one of the possible classes).
Remove tagging from selection.
Serialize edited text (i.e.: walk the edited text, recognize class changes and be able to produce whatever markup I want).
Note classes can be contained one inside another (but not overlap partially); this means some piece of code has two (or more) classes.
Can this be achieved with standard means?
As far as I have seen QTextDocument and associated classes (e.g.: QTextFrame, QTextFormat, etc.) are geared toward visual representation (font style, color etc.) while I need some "logic" tagging that may or may not reflect in visual changes. I mean: text can be all in the same font/color/background, but moving cursor over it I should be able to list all classes active in that specific place (if any).
I am coding in PyQt5, if this is relevant.
The only (rather ugly!) way I seem to see to achieve this is to use QTextCharFormat's tooltip property to store class(es) of each QTextFragment. Is there a better option?
For anyone having the same problem:
QTextCharFormat has a property (named "Property") which can be used to hold arbitrary data.
You need to:
define your set of codes (higher than QtGui.QTextFormat.UserProperty to avoid clash with existing properties).
set with: format.setProperty(mycode, myvalue)
read back with: value = format.property(mycode)
Other Widgets have similar (but NOT identical!) mechanisms (e.g.: QStandardItem has a similar property called data)
IMPORTANT NOTE: if you are using PyQt there are severe restrictions in what you can store and safely retrieve (storing a QTextDocument in a QStandardItem.setData(doc, mycode) will not work reliably because only the reference will be stored and if the underlying python object is garbage collected you'll have a nice crash (SIGSEGV).

How to simplify custom multi checkbox component

I have strange (at least to me) problem with multiple checkboxes with v-model. When using multiple checkboxes that are v-model'ed to one property then normal array is produced which is done with code below:
.form-check
input.form-check-input(type=“checkbox” name=“checkbox” v-model=“methodology” value=“issue tracking tool”)
label.form-check-label issue tracking tool
However, when I try to move it to Single File Component I had to copy some magical tricks from Vue.js forum to make it work. I still suspect that there must be easier way to achieve it. I can’t imagine that it wasn’t solved with simple solutions since it’s quite a common pattern (checkbox in a component - nothing exotic, right?). Any help appreciated!
Here is the working jsfiddle - please have in mind that there is no errors. I just want to know if that really has to be that complicated.
The answer is, no. You may be able to do this magic differently, but it needs to be done.
Vue has to do magic behind the scenes for checkbox because unlike all the other inputs, which have a single item that gets updated, the checkbox has to manage whether the a value is in an array. This means that the listeners and values have to be patched between the wrapper and input.

Dojo and Dijit reference for all properties

I was experimenting with Dojo and Dijit in the past days and I find it quite interesting. I was however trying to find a reference or an API doc that helps me understand all the properties I can assign to widgets and containers.
For example a Tab with a Save Icon will be like this:
<div data-dojo-type="dijit.layout.ContentPane" title="Group Two" data-dojo-props="iconClass: 'dijitEditorIcon dijitEditorIconSave'">
Now, where can I find what to put in the "data-dojo-props" property? Where can I find for example all the list of icons?
My main question would be for example on how to create a vertical menubar, but beyond odd examples scattered here and there, the api reference is not much helpful...
Any help? Am I missing something here?
For this kind of situation, the trick is learning how to convert between the programmatic Javascript style and the declarative HTML style (and sometimes also between the old declarative style, without data).
For the new declarative style, basically the only "real" argument now is data-dojo-props and it consists of an object that will be passed to the widget constructor.
//programatic style
new dijit.myWidget({foo:'a', bar:'b'});
//declarative style
<div data-dojo-type="dijit.myWidget" data-dojo-props="foo:'a', bar:'b'"></div>
You can find what properties an widget accepts by checking the corresponding widget documentation and looking for either declarative or programmatic examples (now that we know how to convert between them). If that is not enough, you can also check the source code - it is usually very well commented and is where api.dojotoolkit.org gets its data from anyway.