@progress/kendo-editor-common 1.7.2-dev.202202071127 → 1.8.0

package/dist/es2015/lists.js

@@ -19,12 +19,12 @@ const rootListDepth = (pos, nodes) => {
     }
     return depth;
 };
-const getListLiftTarget = (schema, resPos, listNodeNames) => {
+const getListLiftTarget = (schema, resPos, options) => {
     // This will return (depth - 1) for root list parent of a list.
     let target = resPos.depth;
-    const bulletList = schema.nodes[listNodeNames.bulletList];
-    const orderedList = schema.nodes[listNodeNames.orderedList];
-    const listItem = schema.nodes[listNodeNames.listItem];
+    const bulletList = schema.nodes[options.bulletList];
+    const orderedList = schema.nodes[options.orderedList];
+    const listItem = schema.nodes[options.listItem];
     for (let i = resPos.depth; i > 0; i--) {
         const node = resPos.node(i);
         if (node.type === bulletList || node.type === orderedList) {
@@ -36,7 +36,7 @@ const getListLiftTarget = (schema, resPos, listNodeNames) => {
     }
     return target - 1;
 };
-function liftSelectionList(state, tr, listNodeNames) {
+function liftSelectionList(state, tr, options) {
     // The function will list paragraphs in selection out to level 1 below root list.
     const { from, to } = state.selection;
     const { paragraph, heading } = state.schema.nodes;
@@ -59,19 +59,19 @@ function liftSelectionList(state, tr, listNodeNames) {
             }
             const range = start.blockRange(end);
             if (range) {
-                tr.lift(range, getListLiftTarget(state.schema, start, listNodeNames));
+                tr.lift(range, getListLiftTarget(state.schema, start, options));
             }
         }
     }
     return tr;
 }
-function toggleListCommand(listNodeNames) {
+function toggleListCommand(options) {
     return function (state, dispatch, view) {
         if (!view) {
             return false;
         }
         state = view.state;
-        const listNode = state.schema.nodes[listNodeNames.listType];
+        const listNode = state.schema.nodes[options.listType];
         const { $from, $to } = state.selection;
         const parent = $from.node(-2);
         const grandgrandParent = $from.node(-3);
@@ -80,31 +80,29 @@ function toggleListCommand(listNodeNames) {
             (grandgrandParent && grandgrandParent.type === listNode)) &&
             isRangeOfSingleType) {
             // Untoggles list
-            return liftListItems(listNodeNames)(state, dispatch);
+            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(listNodeNames)(state, dispatch);
+                liftListItems(options)(state, dispatch);
                 state = view.state;
             }
-            return wrapInList(listNode)(state, dispatch);
+            return wrapInList(listNode, options.listAttrs)(state, dispatch);
         }
     };
 }
 function liftListItem(state, selection, tr, nodeType) {
-    if (!nodeType) {
-        nodeType = state.schema.nodes.listItem;
-    }
+    const listItemNodeType = nodeType || state.schema.nodes.listItem;
     let { $from, $to } = selection;
-    let range = $from.blockRange($to, node => node.childCount && node.firstChild.type === nodeType);
-    if (!range || range.depth < 2 || $from.node(range.depth - 1).type !== nodeType) {
+    let range = $from.blockRange($to, node => node.childCount && node.firstChild.type === listItemNodeType);
+    if (!range || range.depth < 2 || $from.node(range.depth - 1).type !== listItemNodeType) {
         return tr;
     }
     let end = range.end;
     let endOfList = $to.end(range.depth);
     if (end < endOfList) {
-        tr.step(new ReplaceAroundStep(end - 1, endOfList, end, endOfList, new Slice(Fragment.from(nodeType.create(undefined, range.parent.copy())), 1, 0), 1, true));
+        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();
@@ -182,7 +180,7 @@ function findAncestorPosition(doc, pos) {
     }
     return newPos;
 }
-function liftListItems(listNodeNames) {
+function liftListItems(options) {
     return function (state, dispatch) {
         const { tr } = state;
         const { $from, $to } = state.selection;
@@ -192,7 +190,7 @@ function liftListItems(listNodeNames) {
             if (node.isTextblock || node.type.name === 'blockquote' || node.type.name === 'div') {
                 const sel = new NodeSelection(tr.doc.resolve(tr.mapping.map(pos)));
                 const range = sel.$from.blockRange(sel.$to);
-                if (!range || sel.$from.parent.type !== state.schema.nodes[listNodeNames.listItem]) {
+                if (!range || sel.$from.parent.type !== state.schema.nodes[options.listItem]) {
                     return false;
                 }
                 const target = range && liftTarget(range);
@@ -208,27 +206,39 @@ function liftListItems(listNodeNames) {
         return true;
     };
 }
-function wrapInList(nodeType) {
-    return autoJoin(pmWrapInList(nodeType), (before, after) => before.type === after.type && before.type === nodeType);
+function wrapInList(nodeType, attrs = {}) {
+    return autoJoin(pmWrapInList(nodeType, attrs), (before, after) => before.type === after.type && before.type === nodeType);
 }
-export const toggleList = (state, dispatch, view, listNodeNames, command) => {
-    const { listType } = listNodeNames;
+const reListStyle = /list\-style\-type:\s?([\w-]+)/;
+/**
+ * Extracts list-style-type style from node's attributes.
+ * @param attrs - The attributes of the list node
+ * @returns The extracted list-style-type.
+ */
+export const listStyle = (attrs) => {
+    const styleAttr = attrs.style || '';
+    const execArray = reListStyle.exec(styleAttr);
+    return (execArray && execArray[1]) || '';
+};
+export const toggleList = (state, dispatch, view, options, command) => {
+    const { listType, listAttrs = { style: null } } = options;
     const { selection } = state;
     const fromNode = selection.$from.node(selection.$from.depth - 2);
     const endNode = selection.$to.node(selection.$to.depth - 2);
-    if (!fromNode || fromNode.type.name !== listType || (!endNode || endNode.type.name !== listType)) {
-        return toggleListCommand(listNodeNames)(state, dispatch, view);
+    if (!fromNode || fromNode.type.name !== listType || listStyle(fromNode.attrs) !== listStyle(listAttrs) ||
+        (!endNode || endNode.type.name !== listType || listStyle(endNode.attrs) !== listStyle(listAttrs))) {
+        return toggleListCommand(options)(state, dispatch, view);
     }
     else {
         const nodes = view.state.schema.nodes;
         const listNodes = {
-            bulletList: nodes[listNodeNames.bulletList],
-            orderedList: nodes[listNodeNames.orderedList],
-            listItem: nodes[listNodeNames.listItem]
+            bulletList: nodes[options.bulletList],
+            orderedList: nodes[options.orderedList],
+            listItem: nodes[options.listItem]
         };
         const depth = rootListDepth(selection.$to, listNodes);
         let tr = liftFollowingList(state, selection.$to.pos, selection.$to.end(depth), depth, view.state.tr, listNodes.listItem);
-        tr = liftSelectionList(state, tr, listNodeNames);
+        tr = liftSelectionList(state, tr, options);
         tr.setMeta('commandName', command);
         dispatch(tr);
         return true;

package/dist/es2015/main.js

@@ -8,7 +8,7 @@ export { cleanFormatting } from './cleanFormatting';
 export { hasNode, activeNode, formatBlockElements, getBlockFormats, parentBlockFormat, changeTextBlock, blockNodes, cleanTextBlockFormatting } from './blockNode';
 export { hasMark, getMark, getActiveMarks, removeAllMarks, cleanMarks, selectionMarks } from './mark';
 export { indent, canIndentAsListItem, outdent, canOutdentAsListItem, isIndented, canBeIndented, indentBlocks } from './indent';
-export { toggleOrderedList, toggleUnorderedList, toggleList } from './lists';
+export { toggleOrderedList, toggleUnorderedList, toggleList, listStyle } from './lists';
 export { blockquote, liftBlockquote } from './blockquote';
 export { hasSameMarkup, getSelectionText, getNodeFromSelection, selectedLineTextOnly, expandSelection, expandToWordWrap, canInsert, insertNode, indentHtml } from './utils';
 export { alignLeftRules, alignCenterRules, alignRightRules, alignJustifyRules, alignRemoveRules } from './config/align-rules';
@@ -23,6 +23,7 @@ export { placeholder } from './plugins/placeholder';
 export { spacesFix } from './plugins/spaces-fix';
 export { textHighlight, textHighlightKey } from './plugins/highlight';
 export { imageResizing, imageResizeKey } from './plugins/image-resize';
+export { caretColor, caretColorKey } from './plugins/caret-color';
 // ProseMirror re-exports
 export * from 'prosemirror-commands';
 export * from 'prosemirror-dropcursor';

package/dist/es2015/plugins/caret-color.js

@@ -0,0 +1,31 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from "prosemirror-view";
+import { styleValue } from './../mark';
+export const caretColorKey = new PluginKey('caret-color');
+export function caretColor() {
+    return new Plugin({
+        key: caretColorKey,
+        props: {
+            decorations: (state) => {
+                const { doc, selection, storedMarks } = state;
+                if (!selection.empty || !storedMarks) {
+                    return DecorationSet.empty;
+                }
+                const color = styleValue((storedMarks || []).find((m) => m.type.name === 'style'), { name: 'color', value: /^.+$/ });
+                if (!color) {
+                    return DecorationSet.empty;
+                }
+                const parentNode = selection.$anchor.parent;
+                const decorations = [];
+                doc.descendants((node, pos) => {
+                    if (node.eq(parentNode)) {
+                        decorations.push(Decoration.node(pos, pos + node.nodeSize, {
+                            style: 'caret-color: ' + color
+                        }));
+                    }
+                });
+                return DecorationSet.create(doc, decorations);
+            }
+        }
+    });
+}

package/dist/npm/lists.d.ts

@@ -2,13 +2,22 @@ import { NodeType, Schema } from 'prosemirror-model';
 import { EditorState, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { Command } from './types/command';
-declare type ListNodeNames = {
+declare type ListOptions = {
     listType: string;
     orderedList: string;
     bulletList: string;
     listItem: string;
+    listAttrs?: any;
 };
-export declare const toggleList: (state: EditorState<any>, dispatch: (tr: Transaction<any>) => void, view: EditorView<any>, listNodeNames: ListNodeNames, command?: string) => boolean;
+/**
+ * Extracts list-style-type style from node's attributes.
+ * @param attrs - The attributes of the list node
+ * @returns The extracted list-style-type.
+ */
+export declare const listStyle: (attrs: {
+    [key: string]: any;
+}) => string;
+export declare const toggleList: (state: EditorState<any>, dispatch: (tr: Transaction<any>) => void, view: EditorView<any>, options: ListOptions, command?: string) => boolean;
 export declare function toggleUnorderedList(state: EditorState, dispatch: (tr: Transaction) => void, view: EditorView): any;
 export declare function toggleOrderedList(state: EditorState, dispatch: (tr: Transaction) => void, view: EditorView): any;
 export declare const splitListItemKeepMarks: (itemType: NodeType<Schema<any, any>>) => Command;

package/dist/npm/lists.js

@@ -22,12 +22,12 @@ var rootListDepth = function (pos, nodes) {
     }
     return depth;
 };
-var getListLiftTarget = function (schema, resPos, listNodeNames) {
+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[listNodeNames.bulletList];
-    var orderedList = schema.nodes[listNodeNames.orderedList];
-    var listItem = schema.nodes[listNodeNames.listItem];
+    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) {
@@ -39,7 +39,7 @@ var getListLiftTarget = function (schema, resPos, listNodeNames) {
     }
     return target - 1;
 };
-function liftSelectionList(state, tr, listNodeNames) {
+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;
@@ -62,19 +62,19 @@ function liftSelectionList(state, tr, listNodeNames) {
             }
             var range = start.blockRange(end);
             if (range) {
-                tr.lift(range, getListLiftTarget(state.schema, start, listNodeNames));
+                tr.lift(range, getListLiftTarget(state.schema, start, options));
             }
         }
     }
     return tr;
 }
-function toggleListCommand(listNodeNames) {
+function toggleListCommand(options) {
     return function (state, dispatch, view) {
         if (!view) {
             return false;
         }
         state = view.state;
-        var listNode = state.schema.nodes[listNodeNames.listType];
+        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);
@@ -83,31 +83,29 @@ function toggleListCommand(listNodeNames) {
             (grandgrandParent && grandgrandParent.type === listNode)) &&
             isRangeOfSingleType) {
             // Untoggles list
-            return liftListItems(listNodeNames)(state, dispatch);
+            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(listNodeNames)(state, dispatch);
+                liftListItems(options)(state, dispatch);
                 state = view.state;
             }
-            return wrapInList(listNode)(state, dispatch);
+            return wrapInList(listNode, options.listAttrs)(state, dispatch);
         }
     };
 }
 function liftListItem(state, selection, tr, nodeType) {
-    if (!nodeType) {
-        nodeType = state.schema.nodes.listItem;
-    }
+    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 === nodeType; });
-    if (!range || range.depth < 2 || $from.node(range.depth - 1).type !== nodeType) {
+    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 prosemirror_transform_1.ReplaceAroundStep(end - 1, endOfList, end, endOfList, new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from(nodeType.create(undefined, range.parent.copy())), 1, 0), 1, true));
+        tr.step(new prosemirror_transform_1.ReplaceAroundStep(end - 1, endOfList, end, endOfList, new prosemirror_model_1.Slice(prosemirror_model_1.Fragment.from(listItemNodeType.create(undefined, range.parent.copy())), 1, 0), 1, true));
         range = new prosemirror_model_1.NodeRange(tr.doc.resolve($from.pos), tr.doc.resolve(endOfList), range.depth);
     }
     return tr.lift(range, prosemirror_transform_1.liftTarget(range)).scrollIntoView();
@@ -185,7 +183,7 @@ function findAncestorPosition(doc, pos) {
     }
     return newPos;
 }
-function liftListItems(listNodeNames) {
+function liftListItems(options) {
     return function (state, dispatch) {
         var tr = state.tr;
         var _a = state.selection, $from = _a.$from, $to = _a.$to;
@@ -195,7 +193,7 @@ function liftListItems(listNodeNames) {
             if (node.isTextblock || node.type.name === 'blockquote' || node.type.name === 'div') {
                 var sel = new prosemirror_state_1.NodeSelection(tr.doc.resolve(tr.mapping.map(pos)));
                 var range = sel.$from.blockRange(sel.$to);
-                if (!range || sel.$from.parent.type !== state.schema.nodes[listNodeNames.listItem]) {
+                if (!range || sel.$from.parent.type !== state.schema.nodes[options.listItem]) {
                     return false;
                 }
                 var target = range && prosemirror_transform_1.liftTarget(range);
@@ -211,27 +209,40 @@ function liftListItems(listNodeNames) {
         return true;
     };
 }
-function wrapInList(nodeType) {
-    return prosemirror_commands_1.autoJoin(prosemirror_schema_list_1.wrapInList(nodeType), function (before, after) { return before.type === after.type && before.type === nodeType; });
+function wrapInList(nodeType, attrs) {
+    if (attrs === void 0) { attrs = {}; }
+    return prosemirror_commands_1.autoJoin(prosemirror_schema_list_1.wrapInList(nodeType, attrs), function (before, after) { return before.type === after.type && before.type === nodeType; });
 }
-exports.toggleList = function (state, dispatch, view, listNodeNames, command) {
-    var listType = listNodeNames.listType;
+var reListStyle = /list\-style\-type:\s?([\w-]+)/;
+/**
+ * Extracts list-style-type style from node's attributes.
+ * @param attrs - The attributes of the list node
+ * @returns The extracted list-style-type.
+ */
+exports.listStyle = function (attrs) {
+    var styleAttr = attrs.style || '';
+    var execArray = reListStyle.exec(styleAttr);
+    return (execArray && execArray[1]) || '';
+};
+exports.toggleList = function (state, dispatch, view, options, command) {
+    var listType = options.listType, _a = options.listAttrs, listAttrs = _a === void 0 ? { style: null } : _a;
     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(listNodeNames)(state, dispatch, view);
+    if (!fromNode || fromNode.type.name !== listType || exports.listStyle(fromNode.attrs) !== exports.listStyle(listAttrs) ||
+        (!endNode || endNode.type.name !== listType || exports.listStyle(endNode.attrs) !== exports.listStyle(listAttrs))) {
+        return toggleListCommand(options)(state, dispatch, view);
     }
     else {
         var nodes = view.state.schema.nodes;
         var listNodes = {
-            bulletList: nodes[listNodeNames.bulletList],
-            orderedList: nodes[listNodeNames.orderedList],
-            listItem: nodes[listNodeNames.listItem]
+            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, listNodeNames);
+        tr = liftSelectionList(state, tr, options);
         tr.setMeta('commandName', command);
         dispatch(tr);
         return true;

package/dist/npm/main.d.ts

@@ -8,7 +8,7 @@ export { cleanFormatting, CleanFormattingOptions } from './cleanFormatting';
 export { hasNode, activeNode, formatBlockElements, getBlockFormats, parentBlockFormat, changeTextBlock, blockNodes, cleanTextBlockFormatting } from './blockNode';
 export { hasMark, getMark, getActiveMarks, removeAllMarks, cleanMarks, selectionMarks } from './mark';
 export { indent, canIndentAsListItem, outdent, canOutdentAsListItem, isIndented, canBeIndented, indentBlocks } from './indent';
-export { toggleOrderedList, toggleUnorderedList, toggleList } from './lists';
+export { toggleOrderedList, toggleUnorderedList, toggleList, listStyle } from './lists';
 export { blockquote, liftBlockquote } from './blockquote';
 export { hasSameMarkup, getSelectionText, getNodeFromSelection, selectedLineTextOnly, expandSelection, expandToWordWrap, canInsert, insertNode, indentHtml } from './utils';
 export { Command } from './types/command';
@@ -25,6 +25,7 @@ export { placeholder } from './plugins/placeholder';
 export { spacesFix } from './plugins/spaces-fix';
 export { textHighlight, textHighlightKey, InlineDecoration } from './plugins/highlight';
 export { imageResizing, imageResizeKey, ImageResizeOptions } from './plugins/image-resize';
+export { caretColor, caretColorKey } from './plugins/caret-color';
 export * from 'prosemirror-commands';
 export * from 'prosemirror-dropcursor';
 export * from 'prosemirror-gapcursor';

package/dist/npm/main.js

@@ -53,6 +53,7 @@ var lists_1 = require("./lists");
 exports.toggleOrderedList = lists_1.toggleOrderedList;
 exports.toggleUnorderedList = lists_1.toggleUnorderedList;
 exports.toggleList = lists_1.toggleList;
+exports.listStyle = lists_1.listStyle;
 var blockquote_1 = require("./blockquote");
 exports.blockquote = blockquote_1.blockquote;
 exports.liftBlockquote = blockquote_1.liftBlockquote;
@@ -116,6 +117,9 @@ exports.textHighlightKey = highlight_1.textHighlightKey;
 var image_resize_1 = require("./plugins/image-resize");
 exports.imageResizing = image_resize_1.imageResizing;
 exports.imageResizeKey = image_resize_1.imageResizeKey;
+var caret_color_1 = require("./plugins/caret-color");
+exports.caretColor = caret_color_1.caretColor;
+exports.caretColorKey = caret_color_1.caretColorKey;
 // ProseMirror re-exports
 tslib_1.__exportStar(require("prosemirror-commands"), exports);
 tslib_1.__exportStar(require("prosemirror-dropcursor"), exports);

package/dist/npm/plugins/caret-color.d.ts

@@ -0,0 +1,3 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+export declare const caretColorKey: PluginKey<any, any>;
+export declare function caretColor(): Plugin;

package/dist/npm/plugins/caret-color.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var prosemirror_state_1 = require("prosemirror-state");
+var prosemirror_view_1 = require("prosemirror-view");
+var mark_1 = require("./../mark");
+exports.caretColorKey = new prosemirror_state_1.PluginKey('caret-color');
+function caretColor() {
+    return new prosemirror_state_1.Plugin({
+        key: exports.caretColorKey,
+        props: {
+            decorations: function (state) {
+                var doc = state.doc, selection = state.selection, storedMarks = state.storedMarks;
+                if (!selection.empty || !storedMarks) {
+                    return prosemirror_view_1.DecorationSet.empty;
+                }
+                var color = mark_1.styleValue((storedMarks || []).find(function (m) { return m.type.name === 'style'; }), { name: 'color', value: /^.+$/ });
+                if (!color) {
+                    return prosemirror_view_1.DecorationSet.empty;
+                }
+                var parentNode = selection.$anchor.parent;
+                var decorations = [];
+                doc.descendants(function (node, pos) {
+                    if (node.eq(parentNode)) {
+                        decorations.push(prosemirror_view_1.Decoration.node(pos, pos + node.nodeSize, {
+                            style: 'caret-color: ' + color
+                        }));
+                    }
+                });
+                return prosemirror_view_1.DecorationSet.create(doc, decorations);
+            }
+        }
+    });
+}
+exports.caretColor = caretColor;