|
|
@@ -13,6 +13,13 @@ import { generateLiInUl, injectViewList, findInRange } from './utils';
|
|
|
import createElement from '@ckeditor/ckeditor5-utils/src/dom/createelement';
|
|
|
|
|
|
/**
|
|
|
+ * A model-to-view converter for `listItem` model element insertion.
|
|
|
+ *
|
|
|
+ * It converts `listItem` model element to an unordered list with {@link module:engine/view/uielement~UIElement checkbox element}
|
|
|
+ * at the beginning of each list item. It also merges the list with surrounding lists (if available).
|
|
|
+ *
|
|
|
+ * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
|
|
|
+ *
|
|
|
* @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
|
|
|
* @param {module:engine/model/model~Model} model Model instance.
|
|
|
* @returns {Function} Returns a conversion callback.
|
|
|
@@ -47,6 +54,12 @@ export function modelViewInsertion( model ) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * A model-to-view converter for model `$text` element inside a todo list item.
|
|
|
+ *
|
|
|
+ * It takes care of creating text after the {@link module:engine/view/uielement~UIElement checkbox UI element}.
|
|
|
+ *
|
|
|
+ * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
|
|
|
+ *
|
|
|
* @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
|
|
|
* @param {module:utils/eventinfo~EventInfo} evt An object containing information about the fired event.
|
|
|
* @param {Object} data Additional information about the change.
|
|
|
@@ -67,10 +80,19 @@ export function modelViewTextInsertion( evt, data, conversionApi ) {
|
|
|
const viewPosition = conversionApi.mapper.toViewPosition( data.range.start );
|
|
|
const viewText = viewWriter.createText( data.item.data );
|
|
|
|
|
|
+ // Be sure text is created after the UIElement, so if it is a first text node inside a `listItem` element
|
|
|
+ // it has to be moved after the first node in the view list item.
|
|
|
+ //
|
|
|
+ // model: <listItem listtype="todo">[foo]</listItem>
|
|
|
+ // view: <li>^<checkbox/></li> -> <li><checkbox/>foo</li>
|
|
|
viewWriter.insert( viewPosition.offset ? viewPosition : viewPosition.getShiftedBy( 1 ), viewText );
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * A model-to-view converter for `listItem` model element insertion.
|
|
|
+ *
|
|
|
+ * It is used by {@link module:engine/controller/datacontroller~DataController}.
|
|
|
+ *
|
|
|
* @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
|
|
|
* @param {module:engine/model/model~Model} model Model instance.
|
|
|
* @returns {Function} Returns a conversion callback.
|
|
|
@@ -119,6 +141,10 @@ export function dataModelViewInsertion( model ) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * A model-to-view converter for model `$text` element inside a todo list item.
|
|
|
+ *
|
|
|
+ * It is used by {@link module:engine/controller/datacontroller~DataController}.
|
|
|
+ *
|
|
|
* @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:insert
|
|
|
* @param {module:utils/eventinfo~EventInfo} evt An object containing information about the fired event.
|
|
|
* @param {Object} data Additional information about the change.
|
|
|
@@ -147,6 +173,13 @@ export function dataModelViewTextInsertion( evt, data, conversionApi ) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * A view-to-model converter for checkbox element inside a view list item.
|
|
|
+ *
|
|
|
+ * It changes `listType` of model `listItem` to a `todo` value.
|
|
|
+ * When view checkbox is marked as checked the additional `todoListChecked="true"` attribute is added to model item.
|
|
|
+ *
|
|
|
+ * It is used by {@link module:engine/controller/datacontroller~DataController}.
|
|
|
+ *
|
|
|
* @see module:engine/conversion/upcastdispatcher~UpcastDispatcher#event:element
|
|
|
* @param {module:utils/eventinfo~EventInfo} evt An object containing information about the fired event.
|
|
|
* @param {Object} data An object containing conversion input and a placeholder for conversion output and possibly other values.
|
|
|
@@ -177,6 +210,16 @@ export function dataViewModelCheckmarkInsertion( evt, data, conversionApi ) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * A model-to-view converter for `listType` attribute change on `listItem` model element.
|
|
|
+ *
|
|
|
+ * This change means that `<li>` elements parent changes to `<ul class="todo-list">` and
|
|
|
+ * {@link module:engine/view/uielement~UIElement checkbox UI element} is added at the beginning of the list item element.
|
|
|
+ *
|
|
|
+ * This converter is preceded by {@link module:list/converters~modelViewChangeType} and followed by
|
|
|
+ * {@link module:list/converters~modelViewMergeAfterChangeType} to handle splitting and merging surrounding lists of the same type.
|
|
|
+ *
|
|
|
+ * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
|
|
|
+ *
|
|
|
* @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
|
|
|
* @param {module:engine/model/model~Model} model Model instance.
|
|
|
* @returns {Function} Returns a conversion callback.
|
|
|
@@ -196,6 +239,12 @@ export function modelViewChangeType( model ) {
|
|
|
}
|
|
|
|
|
|
/**
|
|
|
+ * A model-to-view converter for `todoListChecked` attribute change on `listItem` model element.
|
|
|
+ *
|
|
|
+ * It marks {@link module:engine/view/uielement~UIElement checkbox UI element} as checked.
|
|
|
+ *
|
|
|
+ * It is used by {@link module:engine/controller/editingcontroller~EditingController}.
|
|
|
+ *
|
|
|
* @see module:engine/conversion/downcastdispatcher~DowncastDispatcher#event:attribute
|
|
|
* @param {module:engine/model/model~Model} model Model instance.
|
|
|
* @returns {Function} Returns a conversion callback.
|
|
|
@@ -218,6 +267,13 @@ export function modelViewChangeChecked( model ) {
|
|
|
};
|
|
|
}
|
|
|
|
|
|
+// Injects checkbox element inside a view list item and adds `todo-list` class to the parent list element.
|
|
|
+//
|
|
|
+// @private
|
|
|
+// @param {module:engine/model/item~Item} modelItem
|
|
|
+// @param {module:engine/view/item~Item} ViewItem
|
|
|
+// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter
|
|
|
+// @param {module:engine/model/model~Model} model
|
|
|
function addTodoElementsToListItem( modelItem, viewItem, viewWriter, model ) {
|
|
|
const isChecked = !!modelItem.getAttribute( 'todoListChecked' );
|
|
|
const checkmarkElement = createCheckmarkElement( modelItem, viewWriter, isChecked, model );
|
|
|
@@ -226,12 +282,27 @@ function addTodoElementsToListItem( modelItem, viewItem, viewWriter, model ) {
|
|
|
viewWriter.insert( viewWriter.createPositionAt( viewItem, 0 ), checkmarkElement );
|
|
|
}
|
|
|
|
|
|
+// Removes checkbox element from a view list item and removes `todo-list` class from the parent list element.
|
|
|
+//
|
|
|
+// @private
|
|
|
+// @param {module:engine/model/item~Item} modelItem
|
|
|
+// @param {module:engine/view/item~Item} ViewItem
|
|
|
+// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter
|
|
|
+// @param {module:engine/model/model~Model} model
|
|
|
function removeTodoElementsFromListItem( modelItem, viewItem, viewWriter, model ) {
|
|
|
viewWriter.removeClass( 'todo-list', viewItem.parent );
|
|
|
viewWriter.remove( viewItem.getChild( 0 ) );
|
|
|
model.change( writer => writer.removeAttribute( 'todoListChecked', modelItem ) );
|
|
|
}
|
|
|
|
|
|
+// Creates checkbox UI element.
|
|
|
+//
|
|
|
+// @private
|
|
|
+// @param {module:engine/model/item~Item} modelItem
|
|
|
+// @param {module:engine/view/downcastwriter~DowncastWriter} viewWriter
|
|
|
+// @param {Boolean} isChecked
|
|
|
+// @param {module:engine/model/model~Model} model
|
|
|
+// @returns {module:view/uielement~UIElement}
|
|
|
function createCheckmarkElement( modelItem, viewWriter, isChecked, model ) {
|
|
|
const uiElement = viewWriter.createUIElement(
|
|
|
'label',
|