@progress/kendo-react-editor 4.14.0-dev.202201141235 → 4.14.0-dev.202201141457

package/dist/es/config/toolsSettings.d.ts

@@ -2,6 +2,14 @@
 import { ButtonProps } from '@progress/kendo-react-buttons';
 import { ColorPickerProps } from '@progress/kendo-react-inputs';
 import { PDFExportProps } from '@progress/kendo-react-pdf';
+/**
+ * @hidden
+ */
+export declare const listsTypes: {
+    orderedList: string;
+    bulletList: string;
+    listItem: string;
+};
 /**
  * Represents a wrapping namespace for the tool settings of the Editor.
  */

package/dist/es/config/toolsSettings.js

@@ -11,7 +11,10 @@ var __assign = (this && this.__assign) || function () {
 };
 import { keys, messages } from './../messages';
 import { bold as boldSettings, italic as italicSettings, underline as underlineSettings, strikethrough as strikethroughSettings, subscript as subscriptSettings, superscript as superscriptSettings, link as linkSettings, alignLeftRules, alignRightRules, alignCenterRules, alignJustifyRules, alignRemoveRules, indentRules, outdentRules } from '@progress/kendo-editor-common';
-var listsTypes = __assign({}, indentRules.listsTypes);
+/**
+ * @hidden
+ */
+export var listsTypes = __assign({}, indentRules.listsTypes);
 /**
  * Represents a wrapping namespace for the tool settings of the Editor.
  */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642162798,
+    publishDate: 1642171239,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/tools/lists-styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * @hidden
+ */
+export declare const ListTool: (props: any) => JSX.Element;

package/dist/es/tools/lists-styled.js

@@ -0,0 +1,308 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import * as React from 'react';
+import { Fragment, Slice, NodeRange, TextSelection, NodeSelection, liftTarget, ReplaceAroundStep, autoJoin, wrapInList as pmWrapInList } from '@progress/kendo-editor-common';
+import { SplitButton } from '@progress/kendo-react-buttons';
+import { listsTypes } from './../config/toolsSettings';
+var rootListDepth = function (pos, nodes) {
+    // Get the depth of the nearest ancestor list
+    var bulletList = nodes.bulletList, orderedList = nodes.orderedList, listItem = nodes.listItem;
+    var depth;
+    for (var i = pos.depth - 1; i > 0; i--) {
+        var node = pos.node(i);
+        if (node.type === bulletList || node.type === orderedList) {
+            depth = i;
+        }
+        if (node.type !== bulletList && node.type !== orderedList && node.type !== listItem) {
+            break;
+        }
+    }
+    return depth;
+};
+var getListLiftTarget = function (schema, resPos, options) {
+    // This will return (depth - 1) for root list parent of a list.
+    var target = resPos.depth;
+    var bulletList = schema.nodes[options.bulletList];
+    var orderedList = schema.nodes[options.orderedList];
+    var listItem = schema.nodes[options.listItem];
+    for (var i = resPos.depth; i > 0; i--) {
+        var node = resPos.node(i);
+        if (node.type === bulletList || node.type === orderedList) {
+            target = i;
+        }
+        if (node.type !== bulletList && node.type !== orderedList && node.type !== listItem) {
+            break;
+        }
+    }
+    return target - 1;
+};
+function liftSelectionList(state, tr, options) {
+    // The function will list paragraphs in selection out to level 1 below root list.
+    var _a = state.selection, from = _a.from, to = _a.to;
+    var _b = state.schema.nodes, paragraph = _b.paragraph, heading = _b.heading;
+    var listCol = [];
+    tr.doc.nodesBetween(from, to, function (node, pos) {
+        if (node.type === paragraph || node.type === heading) {
+            listCol.push({ node: node, pos: pos });
+        }
+    });
+    for (var i = listCol.length - 1; i >= 0; i--) {
+        var block = listCol[i];
+        var start = tr.doc.resolve(tr.mapping.map(block.pos));
+        if (start.depth > 0) {
+            var end = void 0;
+            if (block.node.textContent && block.node.textContent.length > 0) {
+                end = tr.doc.resolve(tr.mapping.map(block.pos + block.node.textContent.length));
+            }
+            else {
+                end = tr.doc.resolve(tr.mapping.map(block.pos + 1));
+            }
+            var range = start.blockRange(end);
+            if (range) {
+                tr.lift(range, getListLiftTarget(state.schema, start, options));
+            }
+        }
+    }
+    return tr;
+}
+function toggleListCommand(options) {
+    return function (state, dispatch, view) {
+        if (!view) {
+            return false;
+        }
+        state = view.state;
+        var listNode = state.schema.nodes[options.listType];
+        var _a = state.selection, $from = _a.$from, $to = _a.$to;
+        var parent = $from.node(-2);
+        var grandgrandParent = $from.node(-3);
+        var isRangeOfSingleType = isRangeOfType(state.doc, $from, $to, listNode);
+        if (((parent && parent.type === listNode) ||
+            (grandgrandParent && grandgrandParent.type === listNode)) &&
+            isRangeOfSingleType) {
+            // Untoggles list
+            return liftListItems(options)(state, dispatch);
+        }
+        else {
+            // Wraps selection in list and converts list type e.g. bullet_list -> ordered_list if needed
+            if (!isRangeOfSingleType) {
+                liftListItems(options)(state, dispatch);
+                state = view.state;
+            }
+            return wrapInList(listNode, options.listAttrs)(state, dispatch);
+        }
+    };
+}
+function liftListItem(state, selection, tr, nodeType) {
+    var listItemNodeType = nodeType || state.schema.nodes.listItem;
+    var $from = selection.$from, $to = selection.$to;
+    var range = $from.blockRange($to, function (node) { return node.childCount && node.firstChild.type === listItemNodeType; });
+    if (!range || range.depth < 2 || $from.node(range.depth - 1).type !== listItemNodeType) {
+        return tr;
+    }
+    var end = range.end;
+    var endOfList = $to.end(range.depth);
+    if (end < endOfList) {
+        tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment.from(listItemNodeType.create(undefined, range.parent.copy())), 1, 0), 1, true));
+        range = new NodeRange(tr.doc.resolve($from.pos), tr.doc.resolve(endOfList), range.depth);
+    }
+    return tr.lift(range, liftTarget(range)).scrollIntoView();
+}
+function liftFollowingList(state, from, to, rootListDepthNum, tr, listItem) {
+    // Function will lift list item following selection to level-1.
+    if (!listItem) {
+        listItem = state.schema.nodes.listItem;
+    }
+    var lifted = false;
+    tr.doc.nodesBetween(from, to, function (node, pos) {
+        if (!lifted && node.type === listItem && pos > from) {
+            lifted = true;
+            var listDepth = rootListDepthNum + 3;
+            while (listDepth > rootListDepthNum + 2) {
+                var start = tr.doc.resolve(tr.mapping.map(pos));
+                listDepth = start.depth;
+                var end = tr.doc.resolve(tr.mapping.map(pos + node.textContent.length));
+                var sel = new TextSelection(start, end);
+                tr = liftListItem(state, sel, tr, listItem);
+            }
+        }
+    });
+    return tr;
+}
+function isRangeOfType(doc, $from, $to, nodeType) {
+    // Step through block-nodes between $from and $to and returns false if a node is
+    // found that isn't of the specified type
+    return getAncestorNodesBetween(doc, $from, $to).filter(function (node) { return node.type !== nodeType; }).length === 0;
+}
+function getAncestorNodesBetween(doc, $from, $to) {
+    // Returns all top-level ancestor-nodes between $from and $to
+    var nodes = Array();
+    var maxDepth = findAncestorPosition(doc, $from).depth;
+    var current = doc.resolve($from.start(maxDepth));
+    while (current.pos <= $to.start($to.depth)) {
+        var depth = Math.min(current.depth, maxDepth);
+        var node = current.node(depth);
+        if (node) {
+            nodes.push(node);
+        }
+        if (depth === 0) {
+            break;
+        }
+        var next = doc.resolve(current.after(depth));
+        if (next.start(depth) >= doc.nodeSize - 2) {
+            break;
+        }
+        if (next.depth !== current.depth) {
+            next = doc.resolve(next.pos + 2);
+        }
+        if (next.depth) {
+            current = doc.resolve(next.start(next.depth));
+        }
+        else {
+            current = doc.resolve(next.end(next.depth));
+        }
+    }
+    return nodes;
+}
+function findAncestorPosition(doc, pos) {
+    // Traverse the document until an "ancestor" is found. Any nestable block can be an ancestor.
+    var nestableBlocks = ['blockquote', 'bulletList', 'orderedList'];
+    if (pos.depth === 1) {
+        return pos;
+    }
+    var node = pos.node(pos.depth);
+    var newPos = pos;
+    while (pos.depth >= 1) {
+        pos = doc.resolve(pos.before(pos.depth));
+        node = pos.node(pos.depth);
+        if (node && nestableBlocks.indexOf(node.type.name) !== -1) {
+            newPos = pos;
+        }
+    }
+    return newPos;
+}
+function liftListItems(options) {
+    return function (state, dispatch) {
+        var tr = state.tr;
+        var _a = state.selection, $from = _a.$from, $to = _a.$to;
+        tr.doc.nodesBetween($from.pos, $to.pos, function (node, pos) {
+            // Following condition will ensure that block types `paragraph`, `heading`, `codeBlock`, `blockquote`, `div` are lifted.
+            // isTextblock is true for paragraph, heading, codeBlock.
+            if (node.isTextblock || node.type.name === 'blockquote' || node.type.name === 'div') {
+                var sel = new NodeSelection(tr.doc.resolve(tr.mapping.map(pos)));
+                var range = sel.$from.blockRange(sel.$to);
+                if (!range || sel.$from.parent.type !== state.schema.nodes[options.listItem]) {
+                    return false;
+                }
+                var target = range && liftTarget(range);
+                if (target === undefined || target === null) {
+                    return false;
+                }
+                tr.lift(range, target);
+            }
+        });
+        if (dispatch) {
+            dispatch(tr);
+        }
+        return true;
+    };
+}
+function wrapInList(nodeType, attrs) {
+    if (attrs === void 0) { attrs = {}; }
+    return autoJoin(pmWrapInList(nodeType, attrs), function (before, after) { return before.type === after.type && before.type === nodeType; });
+}
+var toggleList = function (state, dispatch, view, options, command) {
+    var listType = options.listType;
+    var selection = state.selection;
+    var fromNode = selection.$from.node(selection.$from.depth - 2);
+    var endNode = selection.$to.node(selection.$to.depth - 2);
+    if (!fromNode || fromNode.type.name !== listType || (!endNode || endNode.type.name !== listType)) {
+        return toggleListCommand(options)(state, dispatch, view);
+    }
+    else {
+        var nodes = view.state.schema.nodes;
+        var listNodes = {
+            bulletList: nodes[options.bulletList],
+            orderedList: nodes[options.orderedList],
+            listItem: nodes[options.listItem]
+        };
+        var depth = rootListDepth(selection.$to, listNodes);
+        var tr = liftFollowingList(state, selection.$to.pos, selection.$to.end(depth), depth, view.state.tr, listNodes.listItem);
+        tr = liftSelectionList(state, tr, options);
+        tr.setMeta('commandName', command);
+        dispatch(tr);
+        return true;
+    }
+};
+var parentNode = function (state, nodeType) {
+    var _a = state.selection, from = _a.from, to = _a.to;
+    var result = null;
+    state.doc.nodesBetween(from, to, function (node) {
+        result = result || (node.type === nodeType ? node : null);
+        return !result;
+    });
+    return result;
+};
+var reListStyle = /list\-style\-type:\s?([\w-]+)/;
+var getListStyle = function (node) {
+    var style = node.attrs.style;
+    var listStyle = reListStyle.exec(style);
+    return (listStyle && listStyle[1]) || '';
+};
+/**
+ * @hidden
+ */
+export var ListTool = function (props) {
+    var isActive = false;
+    var view = props.view;
+    var types = listsTypes;
+    var listType = props.listType;
+    var items = (props.items || []).slice();
+    var ol, ul;
+    if (view) {
+        var state = view.state;
+        var nodes = state && state.schema.nodes;
+        ol = nodes && parentNode(state, nodes[types.orderedList]);
+        ul = nodes && parentNode(state, nodes[types.bulletList]);
+        if (listType === types.orderedList) {
+            isActive = Boolean(ol && !ul);
+        }
+        else {
+            isActive = Boolean(!ol && ul);
+        }
+    }
+    var onButtonClick = function (_event) {
+        if (view) {
+            toggleList(view.state, view.dispatch, view, __assign({ listType: listType }, types, { listAttrs: {} }), 'InsertList');
+            view.focus();
+        }
+    };
+    var onItemClick = function (event) {
+        if (view) {
+            var listAttrs = event.item.style ? { style: 'list-style-type: ' + event.item.style + ';' } : {};
+            var currentList = ol || ul;
+            if (currentList && getListStyle(currentList) !== event.item.style) {
+                var pos = view.state.selection.$head.posAtIndex(0, -2) - 1;
+                view.dispatch(view.state.tr.setNodeMarkup(pos, view.state.schema.nodes[listType], { style: 'list-style-type: ' + event.item.style + ';' }));
+            }
+            else {
+                toggleList(view.state, view.dispatch, view, __assign({ listType: listType }, types, { listAttrs: listAttrs }), 'InsertList');
+            }
+            view.focus();
+        }
+    };
+    if (isActive && (ol || ul)) {
+        var listStyleType_1 = getListStyle(ol || ul);
+        items = listStyleType_1 ? items.map(function (i) { return (__assign({}, i, { selected: i.style === listStyleType_1 })); }) : items;
+    }
+    return (React.createElement("span", { onMouseDown: function (e) { e.preventDefault(); } },
+        React.createElement(SplitButton, { textField: "text", items: items, icon: props.icon, onButtonClick: onButtonClick, onItemClick: onItemClick, buttonClass: isActive ? 'k-state-selected k-selected' : '' })));
+};

package/dist/es/tools/main.d.ts

@@ -375,16 +375,26 @@ export declare namespace EditorTools {
     function createListTool(settings: EditorToolsSettings.ListSettings): React.ComponentClass<ListToolProps, React.ComponentState>;
     const OrderedList_base: React.ComponentClass<ListToolProps, any>;
     /**
-     * The OrderedList tool component.
+     * The basic OrderedList tool component. Will render a button which applies `<ol>` HTML element.
      */
     class OrderedList extends OrderedList_base {
     }
     const UnorderedList_base: React.ComponentClass<ListToolProps, any>;
     /**
-     * The UnorderedList tool component.
+     * The basic UnorderedList tool component. Will render a button which applies `<ul>` HTML element.
      */
     class UnorderedList extends UnorderedList_base {
     }
+    /**
+     * The BulletedList tool component.
+     * Will render a SplitButton which applies `<ol>` HTML element with predefined styles - disc and square.
+     */
+    const BulletedList: (props: any) => JSX.Element;
+    /**
+     * The NumberedList tool component.
+     * Will render a SplitButton which applies `<ul>` HTML element with predefined styles - upper-roman, lower-roman, upper-latin and lower-latin.
+     */
+    const NumberedList: (props: any) => JSX.Element;
     /**
      * The props for the Outdent tool component of the Editor.
      */

package/dist/es/tools/main.js

@@ -44,6 +44,7 @@ import { Pdf as PdfTool } from './pdf';
 import { SelectAll as SelectAllTool } from './selectAll';
 import { CleanFormatting as CleanFormattingTool } from './cleanFormatting';
 import { FindAndReplace as FindAndReplaceTool } from './findReplace';
+import { ListTool } from './lists-styled';
 /**
  * Represents a wrapping namespace for the tool components, props, and functions of the Editor.
  */
@@ -383,7 +384,7 @@ export var EditorTools;
     function createListTool(settings) { return ListToolNS.createListTool(settings); }
     EditorTools.createListTool = createListTool;
     /**
-     * The OrderedList tool component.
+     * The basic OrderedList tool component. Will render a button which applies `<ol>` HTML element.
      */
     var OrderedList = /** @class */ (function (_super) {
         __extends(OrderedList, _super);
@@ -394,7 +395,7 @@ export var EditorTools;
     }(createListTool(EditorToolsSettings.orderedList)));
     EditorTools.OrderedList = OrderedList;
     /**
-     * The UnorderedList tool component.
+     * The basic UnorderedList tool component. Will render a button which applies `<ul>` HTML element.
      */
     var UnorderedList = /** @class */ (function (_super) {
         __extends(UnorderedList, _super);
@@ -404,6 +405,33 @@ export var EditorTools;
         return UnorderedList;
     }(createListTool(EditorToolsSettings.bulletList)));
     EditorTools.UnorderedList = UnorderedList;
+    /**
+     * The BulletedList tool component.
+     * Will render a SplitButton which applies `<ol>` HTML element with predefined styles - disc and square.
+     */
+    EditorTools.BulletedList = function (props) {
+        var ulItems = [
+            { icon: 'list-unordered', text: 'Disc', style: 'disc' },
+            // { icon: 'list-unordered-circle', text: 'Circle', style: 'circle' },
+            { icon: 'list-unordered-square', text: 'Square', style: 'square' }
+        ];
+        return (React.createElement(ListTool, __assign({ listType: EditorToolsSettings.bulletList.listType, items: ulItems, icon: "list-unordered" }, props)));
+    };
+    /**
+     * The NumberedList tool component.
+     * Will render a SplitButton which applies `<ul>` HTML element with predefined styles - upper-roman, lower-roman, upper-latin and lower-latin.
+     */
+    EditorTools.NumberedList = function (props) {
+        var olItems = [
+            { icon: 'list-ordered', text: 'Decimal' },
+            // { icon: 'list-leading-zero', text: 'Decimal with leading zero', styleType: 'decimal-leading-zero' },
+            { icon: 'list-roman-upper', text: 'Upper roman', style: 'upper-roman' },
+            { icon: 'list-roman-lower', text: 'Lower roman', style: 'lower-roman' },
+            { icon: 'list-latin-big', text: 'Upper latin', style: 'upper-latin' },
+            { icon: 'list-latin-small', text: 'Lower latin', style: 'lower-latin' }
+        ];
+        return (React.createElement(ListTool, __assign({ listType: EditorToolsSettings.orderedList.listType, items: olItems, icon: "list-ordered" }, props)));
+    };
     /**
      * Creates the Outdent tool component of the Editor.
      *

package/dist/npm/config/toolsSettings.d.ts

@@ -2,6 +2,14 @@
 import { ButtonProps } from '@progress/kendo-react-buttons';
 import { ColorPickerProps } from '@progress/kendo-react-inputs';
 import { PDFExportProps } from '@progress/kendo-react-pdf';
+/**
+ * @hidden
+ */
+export declare const listsTypes: {
+    orderedList: string;
+    bulletList: string;
+    listItem: string;
+};
 /**
  * Represents a wrapping namespace for the tool settings of the Editor.
  */

package/dist/npm/config/toolsSettings.js

@@ -13,7 +13,10 @@ var __assign = (this && this.__assign) || function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 var messages_1 = require("./../messages");
 var kendo_editor_common_1 = require("@progress/kendo-editor-common");
-var listsTypes = __assign({}, kendo_editor_common_1.indentRules.listsTypes);
+/**
+ * @hidden
+ */
+exports.listsTypes = __assign({}, kendo_editor_common_1.indentRules.listsTypes);
 /**
  * Represents a wrapping namespace for the tool settings of the Editor.
  */
@@ -461,7 +464,7 @@ var EditorToolsSettings;
      */
     EditorToolsSettings.indent = {
         actions: kendo_editor_common_1.indentRules.nodes,
-        listsTypes: listsTypes,
+        listsTypes: exports.listsTypes,
         props: __assign({ icon: 'indent-increase' }, buttonCommonProps),
         messages: {
             title: messages_1.keys.indent
@@ -473,7 +476,7 @@ var EditorToolsSettings;
      */
     EditorToolsSettings.outdent = {
         actions: kendo_editor_common_1.outdentRules.nodes,
-        listsTypes: listsTypes,
+        listsTypes: exports.listsTypes,
         props: __assign({ icon: 'indent-decrease' }, buttonCommonProps),
         messages: {
             title: messages_1.keys.outdent
@@ -484,24 +487,24 @@ var EditorToolsSettings;
      * The object of the OrderedList tool settings.
      */
     EditorToolsSettings.orderedList = {
-        listType: listsTypes.orderedList,
+        listType: exports.listsTypes.orderedList,
         props: __assign({ icon: 'list-ordered' }, buttonCommonProps),
         messages: {
             title: messages_1.keys.orderedList
         },
         commandName: 'OrderedList',
-        types: __assign({}, listsTypes)
+        types: __assign({}, exports.listsTypes)
     };
     /**
      * The object of the UnorderedList tool settings.
      */
     EditorToolsSettings.bulletList = {
-        listType: listsTypes.bulletList,
+        listType: exports.listsTypes.bulletList,
         props: __assign({ icon: 'list-unordered' }, buttonCommonProps),
         messages: {
             title: messages_1.keys.bulletList
         },
         commandName: 'UnorderedList',
-        types: __assign({}, listsTypes)
+        types: __assign({}, exports.listsTypes)
     };
 })(EditorToolsSettings = exports.EditorToolsSettings || (exports.EditorToolsSettings = {}));

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-editor',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642162798,
+    publishDate: 1642171239,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/tools/lists-styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * @hidden
+ */
+export declare const ListTool: (props: any) => JSX.Element;