niegowski
commented
1 year ago But it seems createElement doesn't have a third argument for children. And there's no createContainerElement either. It's very confusing. What I also found surprising is that the "writer" you get here is not an UpcastWriter but a normal Writer. All Writer classes seem to have different methods...? But I cannot for the life of me figure out how to create a nested structure here.
While upcasting you are converting from data view to editor model so the writer is creating and manipulating only model nodes. We have an issue for aligning those writers so the API would be easier to understand: https://github.com/ckeditor/ckeditor5/issues/7316
I created a simple plugin according to your description:
import { Plugin } from 'ckeditor5/src/core';
import { toWidget, toWidgetEditable } from 'ckeditor5/src/widget';
class Forms extends Plugin {
init() {
const editor = this.editor;
const schema = editor.model.schema;
schema.register( 'forms', {
inheritAllFrom: '$inlineObject',
allowAttributes: 'type'
} );
schema.register( 'formName', {
allowIn: 'forms',
allowChildren: '$text',
isLimit: true
} );
// Disallow all attributes on $text inside `formName` (there won't be any bold/italic etc. inside).
schema.addAttributeCheck( context => {
if ( context.endsWith( 'formName $text' ) ) {
return false;
}
} );
// Allow only text nodes inside `formName` (without any elements that could be down-casted to HTML elements).
schema.addChildCheck( ( context, childDefinition ) => {
if ( context.endsWith( 'formName' ) && childDefinition.name !== '$text' ) {
return false;
}
} );
// Data upcast. Convert a single element loaded by the editor to a structure of model elements.
editor.conversion.for( 'upcast' ).elementToElement( {
view: {
name: 'input',
attributes: [ 'type', 'name' ]
},
model: ( viewElement, { writer } ) => {
const modelElement = writer.createElement( 'forms', {
type: viewElement.getAttribute( 'type' )
} );
const nameModelElement = writer.createElement( 'formName' );
// Build model structure out of a single view element.
writer.insert( nameModelElement, modelElement, 0 );
writer.insertText( viewElement.getAttribute( 'name' ), nameModelElement, 0 );
return modelElement;
}
} );
// Editing downcast. Convert model elements separately to widget and to widget-editable nested inside.
editor.conversion.for( 'editingDowncast' )
.elementToElement( {
model: 'forms',
view: ( modelElement, { writer } ) => {
const viewElement = writer.createContainerElement( 'span', {
'data-type': modelElement.getAttribute( 'type' ),
style: 'display: inline-block'
} );
return toWidget( viewElement, writer );
}
} )
.elementToElement( {
model: 'formName',
view: ( modelElement, { writer } ) => {
const viewElement = writer.createEditableElement( 'span' );
return toWidgetEditable( viewElement, writer );
}
} );
// Data downcast. Convert the outermost model element and all its content into a single view element.
editor.conversion.for( 'dataDowncast' )
.elementToElement( {
model: 'forms',
view: ( modelElement, { writer, consumable } ) => {
let nameModelElement;
// Find the `formName` model element and consume everything inside the model element range,
// so it won't get converted by any other downcast converters.
for ( const { item } of editor.model.createRangeIn( modelElement ) ) {
if ( item.is( 'element', 'formName' ) ) {
nameModelElement = modelElement.getChild( 0 );
}
consumable.consume( item, 'insert' );
}
return writer.createContainerElement( 'input', {
type: modelElement.getAttribute( 'type' ),
name: nameModelElement.getChild( 0 ).data
} );
}
} );
}
}
Witoso
apadol-cksource
rgpublic
CKEditorBot
I currently have sth. like this:
But it seems createElement doesn't have a third argument for children. And there's no createContainerElement either. It's very confusing. What I also found surprising is that the "writer" you get here is not an UpcastWriter but a normal Writer. All Writer classes seem to have different methods...? But I cannot for the life of me figure out how to create a nested structure here.
Eventually, I'd like to create a widget during downcast. When I try to do that with a single model element though, I cannot focus the inner element even though it has contenteditable set to true. If I click, the caret appears and is then quickly moved away. This is way I thought it might be necessary to have a separate model.
Unfortunately, the docs only talk about how to turn existing nested DIVs into a model. But there is no example on how to turn sth. like this:
<input type="text" name="HELLO" />into this:
This is what I'd like to achieve as a widget to have the name attribute editable right in the widget. Isn't this possible?