@kaizen/components 1.46.0 → 1.47.0

package/dist/esm/RichTextEditor/utils/commands/getMarkRange.mjs

@@ -1,41 +0,0 @@
-// Note: this doesn't handle selections _across_ nodes.
-// At the time of writing the implication of this is on links: they cannot span across multiple nodes.
-// There's no impact on the other marks like bold, italics and underline.
-var getMarkRange = function ($pos, type) {
-  if ($pos === void 0) {
-    $pos = null;
-  }
-  if (type === void 0) {
-    type = null;
-  }
-  if (!$pos || !type) {
-    return null;
-  }
-  var start = $pos.parent.childAfter($pos.parentOffset);
-  if (!start.node) {
-    return null;
-  }
-  var mark = start.node.marks.find(function (m) {
-    return m.type === type;
-  });
-  if (!mark) {
-    return null;
-  }
-  var startIndex = $pos.index();
-  var startPos = $pos.start() + start.offset;
-  var endIndex = startIndex + 1;
-  var endPos = startPos + start.node.nodeSize;
-  while (startIndex > 0 && mark.isInSet($pos.parent.child(startIndex - 1).marks)) {
-    startIndex -= 1;
-    startPos -= $pos.parent.child(startIndex).nodeSize;
-  }
-  while (endIndex < $pos.parent.childCount && mark.isInSet($pos.parent.child(endIndex).marks)) {
-    endPos += $pos.parent.child(endIndex).nodeSize;
-    endIndex += 1;
-  }
-  return {
-    from: startPos,
-    to: endPos
-  };
-};
-export { getMarkRange };

package/dist/esm/RichTextEditor/utils/commands/listIsActive.mjs

@@ -1,6 +0,0 @@
-import { findParentNodeOfTypeClosestToPos } from 'prosemirror-utils';
-var listIsActive = function (state, type, listNodes) {
-  var listNode = findParentNodeOfTypeClosestToPos(state.selection.$from, listNodes);
-  return (listNode === null || listNode === void 0 ? void 0 : listNode.node.type) === type;
-};
-export { listIsActive };

package/dist/esm/RichTextEditor/utils/commands/markContainsSelection.mjs

@@ -1,14 +0,0 @@
-import { getMarkRange } from './getMarkRange.mjs';
-import { markIsActive } from './markIsActive.mjs';
-
-/** Check the current PM Selection against the Mark Type provided */
-var markContainsSelection = function (state, markType) {
-  if (!markIsActive(state, markType)) {
-    return false;
-  }
-  var selection = state.selection;
-  var $from = selection.$from;
-  var markRange = getMarkRange($from, markType);
-  return !!markRange && markRange.from <= selection.from && markRange.to >= selection.to;
-};
-export { markContainsSelection };

package/dist/esm/RichTextEditor/utils/commands/markIsActive.mjs

@@ -1,12 +0,0 @@
-var markIsActive = function (state, type) {
-  var _a = state.selection,
-    from = _a.from,
-    $from = _a.$from,
-    to = _a.to,
-    empty = _a.empty;
-  if (empty) {
-    return !!type.isInSet(state.storedMarks || $from.marks());
-  }
-  return !!state.doc.rangeHasMark(from, to, type);
-};
-export { markIsActive };

package/dist/esm/RichTextEditor/utils/commands/removeMark.mjs

@@ -1,37 +0,0 @@
-import { getMarkRange } from './getMarkRange.mjs';
-
-/** Remove part or all of the Mark from the current selection */
-var removeMark = function (type, options) {
-  if (options === void 0) {
-    options = {
-      toExtent: false
-    };
-  }
-  return function (state, dispatch) {
-    var tr = state.tr,
-      selection = state.selection,
-      doc = state.doc;
-    var from = selection.from,
-      to = selection.to;
-    var $from = selection.$from;
-    if (!dispatch) return false;
-    if (selection.empty) {
-      dispatch(tr.removeStoredMark(type));
-    } else {
-      if (options.range || options.toExtent) {
-        var range = options.range || getMarkRange($from, type);
-        if (range) {
-          from = range.from;
-          to = range.to;
-        }
-      }
-      var hasMark = doc.rangeHasMark(from, to, type);
-      if (hasMark) {
-        tr.removeMark(from, to, type);
-      }
-      dispatch(tr);
-    }
-    return true;
-  };
-};
-export { removeMark };

package/dist/esm/RichTextEditor/utils/commands/updateMark.mjs

@@ -1,35 +0,0 @@
-import { getMarkRange } from './getMarkRange.mjs';
-
-/** Update Mark attributes, create nested Marks or split Marks of the same type   */
-var updateMark = function (type, attrs, options) {
-  if (options === void 0) {
-    options = {
-      toExtent: false
-    };
-  }
-  return function (state, dispatch) {
-    if (!dispatch) return false;
-    var tr = state.tr,
-      selection = state.selection,
-      doc = state.doc;
-    var from = selection.from,
-      to = selection.to;
-    var $from = selection.$from,
-      empty = selection.empty;
-    if (empty || options.toExtent) {
-      var range = getMarkRange($from, type);
-      if (range) {
-        from = range.from;
-        to = range.to;
-      }
-    }
-    var hasMark = doc.rangeHasMark(from, to, type);
-    if (hasMark) {
-      tr.removeMark(from, to, type);
-    }
-    tr.addMark(from, to, type.create(attrs));
-    dispatch(tr);
-    return true;
-  };
-};
-export { updateMark };

package/dist/esm/RichTextEditor/utils/commands/validateAndRemoveMarks.mjs

@@ -1,33 +0,0 @@
-import { RemoveMarkStep } from 'prosemirror-transform';
-
-// This is a variation on the removeMark transform in
-// https://github.com/ProseMirror/prosemirror-transform/blob/master/src/mark.js#L44
-/** This will walk the full doc and remove the Marks that fail the validator method */
-var validateAndRemoveMarks = function (markType, validator) {
-  return function (state, dispatch) {
-    if (!dispatch) return false;
-    var from = 0;
-    var to = state.doc.content.size;
-    var tr = state.tr;
-    var matched = [];
-    var step = 0;
-    tr.doc.nodesBetween(from, to, function (node, pos) {
-      step++;
-      var foundMark = markType.isInSet(node.marks);
-      if (foundMark && !validator(foundMark.attrs)) {
-        matched.push({
-          style: foundMark,
-          from: Math.max(pos, from),
-          to: Math.min(pos + node.nodeSize, to),
-          step: step
-        });
-      }
-    });
-    matched.forEach(function (m) {
-      return tr.step(new RemoveMarkStep(m.from, m.to, m.style));
-    });
-    dispatch(tr);
-    return true;
-  };
-};
-export { validateAndRemoveMarks };

package/dist/esm/RichTextEditor/utils/core/createRichTextEditor.mjs

@@ -1,50 +0,0 @@
-import { Transaction } from 'prosemirror-state';
-import { EditorView } from 'prosemirror-view';
-
-/**
- * createRichTextEditor
- * Initialize a ProseMirror EditorView
- */
-var createRichTextEditor = function (_a) {
-  var initialEditorState = _a.initialEditorState,
-    node = _a.node,
-    _b = _a.onChange,
-    onChange = _b === void 0 ? function () {
-      return undefined;
-    } : _b,
-    attributes = _a.attributes,
-    _c = _a.isEditable,
-    isEditable = _c === void 0 ? function () {
-      return true;
-    } : _c;
-  // Handle transactions eminating from the EditorView instance
-  var dispatch = function (tx) {
-    var newEditorState = editorView && editorView.state.apply(tx);
-    if (newEditorState) {
-      onChange(newEditorState);
-      editorView && editorView.updateState(newEditorState);
-    }
-  };
-  // Allow the dispatcher to handle either a Command or a Transaction so we can
-  // change the state more ergonomically upstream
-  var dispatchCommandOrTransaction = function (commandOrTransaction) {
-    if (commandOrTransaction instanceof Transaction) {
-      dispatch(commandOrTransaction);
-    } else if (editorView) {
-      commandOrTransaction(editorView.state, dispatch);
-    }
-  };
-  var editorView = new EditorView(node, {
-    state: initialEditorState,
-    dispatchTransaction: dispatchCommandOrTransaction,
-    attributes: attributes,
-    editable: isEditable
-  });
-  return {
-    destroy: function () {
-      editorView && editorView.destroy();
-    },
-    dispatchTransaction: dispatchCommandOrTransaction
-  };
-};
-export { createRichTextEditor };

package/dist/esm/RichTextEditor/utils/core/hooks/useRichTextEditor.mjs

@@ -1,73 +0,0 @@
-import { __assign } from 'tslib';
-import { useState, useRef, useCallback, useEffect } from 'react';
-import { createRichTextEditor } from '../createRichTextEditor.mjs';
-
-/**
- * useRichTextEditor
- * React hook to initialize a ProseMirror editor, handle binding it to the DOM,
- * and updating the state within React’s lifecycle.
- *
- * @param {initialEditorState} ProseMirror state
- * @returns {Array}
- */
-var useRichTextEditor = function (initialEditorState,
-/*
- * Pass in HTML attributes into the parent RTE node
- */
-attributes, options) {
-  options = __assign({
-    editable: true
-  }, options);
-  var _a = useState(initialEditorState),
-    editorState = _a[0],
-    setEditorState = _a[1];
-  // Refs to hold the methods returned from ProseMirror’s initialization
-  var destroyEditorRef = useRef();
-  var dispatchTransactionRef = useRef(function () {
-    return undefined;
-  });
-  // Construct a consistent reference to call the dispatchTransactionRef without
-  // forcing the consumer to unwind it
-  var dispatchTransaction = useCallback(function (commandOrTransaction) {
-    dispatchTransactionRef.current(commandOrTransaction);
-  }, [dispatchTransactionRef]);
-  // Hold editableStatus as a ref so we can toggle its status
-  var editableStatusRef = useRef(options.editable);
-  var setEditableStatus = useCallback(function (status) {
-    editableStatusRef.current = status;
-    // Trigger an update within ProseMirror by issuing a noop transaction
-    dispatchTransaction(function (state, dispatch) {
-      if (!dispatch) return false;
-      dispatch(state.tr);
-      return true;
-    });
-  }, [editableStatusRef]);
-  var editorRef = useCallback(function (node) {
-    if (node !== null) {
-      var instance = createRichTextEditor({
-        node: node,
-        initialEditorState: editorState,
-        onChange: setEditorState,
-        isEditable: function () {
-          return editableStatusRef.current;
-        },
-        attributes: attributes
-      });
-      destroyEditorRef.current = instance.destroy;
-      dispatchTransactionRef.current = instance.dispatchTransaction;
-    }
-  },
-  // Including editorState in the dependencies here will cause an endless
-  // loop as the initialization changes its value
-  [setEditorState, editableStatusRef]);
-  // Tear down ProseMirror when the consuming component is unmounted
-  useEffect(function () {
-    return function () {
-      if (destroyEditorRef.current) {
-        destroyEditorRef.current();
-      }
-    };
-  }, [destroyEditorRef]);
-  return [editorRef, editorState, dispatchTransaction, setEditableStatus];
-};
-export { useRichTextEditor };

package/dist/esm/RichTextEditor/utils/core/inputrules.mjs

@@ -1,22 +0,0 @@
-import { wrappingInputRule } from 'prosemirror-inputrules';
-
-// Given a list node type, returns an input rule that turns a number
-// followed by a dot at the start of a textblock into an ordered list.
-// Copied from https://github.com/ProseMirror/prosemirror-example-setup/blob/master/src/inputrules.js
-var orderedListRule = function (nodeType) {
-  return wrappingInputRule(/^(\d+)\.\s$/, nodeType, function (match) {
-    return {
-      order: +match[1]
-    };
-  }, function (match, node) {
-    return node.childCount + node.attrs.order == +match[1];
-  });
-};
-// Given a list node type, returns an input rule that turns a bullet
-// (dash, plush, or asterisk) at the start of a textblock into a
-// bullet list.
-// Copied from https://github.com/ProseMirror/prosemirror-example-setup/blob/master/src/inputrules.js
-var bulletListRule = function (nodeType) {
-  return wrappingInputRule(/^\s*([-+*])\s$/, nodeType);
-};
-export { bulletListRule, orderedListRule };

package/dist/esm/RichTextEditor/utils/core/state.mjs

@@ -1,36 +0,0 @@
-import { Node } from 'prosemirror-model';
-import { EditorState } from 'prosemirror-state';
-
-/**
- * createEditorState
- * Create a ProseMirror EditorState. Wrapper for EditorState.create to make the
- * API obvious to consumers
- */
-var createEditorState = function (schema, doc, plugins) {
-  if (plugins === void 0) {
-    plugins = [];
-  }
-  return EditorState.create({
-    doc: doc,
-    schema: schema,
-    plugins: plugins
-  });
-};
-/**
- * Create a ProseMirror doc node from the combination of a schema and the object
- * representation of a document
- */
-var createDocNode = function (schema, docObject) {
-  return Node.fromJSON(schema, docObject);
-};
-/**
- * Create a ProseMirror doc node from the combination of a schema and the doc’s
- * content array (rather than the top-level doc node).
- */
-var createDocNodeFromContent = function (schema, docContent) {
-  return createDocNode(schema, {
-    type: "doc",
-    content: docContent
-  });
-};
-export { createDocNode, createDocNodeFromContent, createEditorState };

package/dist/esm/RichTextEditor/utils/plugins/LinkManager/LinkManager.mjs

@@ -1,133 +0,0 @@
-import debounce from 'lodash.debounce';
-import { Plugin } from 'prosemirror-state';
-import { getMarkAttrs } from '../../commands/getMarkAttrs.mjs';
-import { getMarkRange } from '../../commands/getMarkRange.mjs';
-import 'prosemirror-utils';
-import { markContainsSelection } from '../../commands/markContainsSelection.mjs';
-import { markIsActive } from '../../commands/markIsActive.mjs';
-import { removeMark } from '../../commands/removeMark.mjs';
-import { updateMark } from '../../commands/updateMark.mjs';
-import { validateAndRemoveMarks } from '../../commands/validateAndRemoveMarks.mjs';
-import { LinkEditor } from './components/LinkEditor/LinkEditor.mjs';
-import { createReactTooltipWrapper } from './createReactTooltipWrapper.mjs';
-var LinkManager = /** @class */function () {
-  function LinkManager(view, markType, editorComponent, linkAttributeValidator) {
-    var _this = this;
-    this.editorComponent = editorComponent;
-    this.linkActive = function (state) {
-      return markIsActive(state, markType);
-    };
-    this.validateLinks = validateAndRemoveMarks(markType, linkAttributeValidator);
-    this.markType = markType;
-    this.tooltipTarget = null;
-    this.update(view, null);
-    this.onResize = debounce(function () {
-      _this.update(view, null);
-    }, 15);
-  }
-  LinkManager.prototype.update = function (view, lastState) {
-    var state = view.state;
-    // Don’t do anything if the document/TextSelection didn't change
-    if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
-      return;
-    }
-    // Is the selection empty or not a link
-    //
-    // TODO: Also need to check if the selection is _only_ a link. If it covers
-    // more than a single mark then we don’t want to allow edited
-    if (state.selection.empty || !this.linkActive(state)) {
-      this.destroyElement(view);
-      return;
-    }
-    // If there is a selection and we dont have something in DOM
-    // then create element and inject
-    if (!this.tooltipTarget) {
-      this.createElement(view);
-    }
-    this.updateElement(view);
-  };
-  LinkManager.prototype.destroy = function () {
-    var _a;
-    (_a = this.tooltipTarget) === null || _a === void 0 ? void 0 : _a.destroy();
-    window.removeEventListener("resize", this.onResize);
-  };
-  LinkManager.prototype.createElement = function (view) {
-    if (!view.dom.parentElement) return;
-    this.tooltipTarget = createReactTooltipWrapper(view.dom.parentElement, this.editorComponent, this.getEditorProps(view));
-    window.addEventListener("resize", this.onResize);
-  };
-  LinkManager.prototype.updateElement = function (view) {
-    var _a;
-    (_a = this.tooltipTarget) === null || _a === void 0 ? void 0 : _a.update(this.getEditorProps(view));
-  };
-  LinkManager.prototype.destroyElement = function (view) {
-    var _a;
-    view.dispatch(this.validateLinks);
-    (_a = this.tooltipTarget) === null || _a === void 0 ? void 0 : _a.destroy();
-    this.tooltipTarget = null;
-  };
-  LinkManager.prototype.getEditorProps = function (view) {
-    var _this = this;
-    var selectionPosition = null;
-    var selection = view.state.selection;
-    var contained = markContainsSelection(view.state, this.markType);
-    var $from = selection.$from;
-    var range = getMarkRange($from, this.markType);
-    var start;
-    var end;
-    if (!contained && range) {
-      start = view.coordsAtPos(range.from);
-      end = view.coordsAtPos(range.to);
-    } else {
-      start = view.coordsAtPos(selection.from);
-      if (selection.to === view.state.doc.content.size) {
-        end = view.coordsAtPos(selection.to - 1);
-      } else {
-        end = view.coordsAtPos(selection.to);
-      }
-    }
-    selectionPosition = {
-      top: start.top,
-      left: start.left,
-      width: end.right - start.left,
-      height: start.top - start.bottom
-    };
-    return {
-      removeMark: function () {
-        view.dispatch(removeMark(_this.markType, {
-          toExtent: true
-        }));
-      },
-      updateAttrs: function (attrs) {
-        view.dispatch(updateMark(_this.markType, attrs, {
-          toExtent: true
-        }));
-      },
-      attrs: getMarkAttrs(view.state, this.markType),
-      selectionPosition: selectionPosition,
-      focusEditor: function () {
-        view.focus();
-      }
-    };
-  };
-  return LinkManager;
-}();
-var defaultLinkAttributeValidator = function (attrs) {
-  if (attrs == null) {
-    return false;
-  }
-  return attrs.href && attrs.href !== "";
-};
-var createLinkManager = function (_a) {
-  var markType = _a.markType,
-    _b = _a.editorComponent,
-    editorComponent = _b === void 0 ? LinkEditor : _b,
-    _c = _a.linkAttributeValidator,
-    linkAttributeValidator = _c === void 0 ? defaultLinkAttributeValidator : _c;
-  return new Plugin({
-    view: function (editorView) {
-      return new LinkManager(editorView, markType, editorComponent, linkAttributeValidator);
-    }
-  });
-};
-export { createLinkManager };

package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkEditor/LinkEditor.mjs

@@ -1,59 +0,0 @@
-import React, { useState } from 'react';
-import { LinkModal } from '../LinkModal/LinkModal.mjs';
-import { LinkPopover } from '../LinkPopover/LinkPopover.mjs';
-const LinkEditor = /*#__PURE__*/function () {
-  const LinkEditor = function (_a) {
-    var _b;
-    var attrs = _a.attrs,
-      removeMark = _a.removeMark,
-      updateAttrs = _a.updateAttrs,
-      selectionPosition = _a.selectionPosition,
-      focusEditor = _a.focusEditor;
-    var _c = useState(attrs.href != null),
-      isPopoverOpen = _c[0],
-      setIsPopoverOpen = _c[1];
-    var _d = useState(
-      // eslint-disable-next-line no-underscore-dangle
-      ((_b = attrs._metadata) === null || _b === void 0 ? void 0 : _b.added) === true),
-      modalOpen = _d[0],
-      setModalOpen = _d[1];
-    var _e = useState(attrs.href ? attrs.href : undefined),
-      href = _e[0],
-      setHref = _e[1];
-    return /*#__PURE__*/React.createElement(React.Fragment, null, isPopoverOpen && ( /*#__PURE__*/React.createElement(LinkPopover, {
-      href: href,
-      selectionPosition: selectionPosition,
-      onRemove: function () {
-        removeMark();
-        focusEditor();
-      },
-      onEdit: function () {
-        setIsPopoverOpen(false);
-        setModalOpen(true);
-      }
-    })), /*#__PURE__*/React.createElement(LinkModal, {
-      defaultHref: href,
-      isOpen: modalOpen,
-      onAfterLeave: focusEditor,
-      onSubmit: function (submittedHref) {
-        setHref(submittedHref);
-        updateAttrs({
-          href: submittedHref,
-          _metadata: null
-        });
-        setModalOpen(false);
-      },
-      onDismiss: function () {
-        setModalOpen(false);
-        if (href) {
-          setIsPopoverOpen(true);
-        } else {
-          removeMark();
-        }
-      }
-    }));
-  };
-  LinkEditor.displayName = "LinkEditor";
-  return LinkEditor;
-}();
-export { LinkEditor };

package/dist/esm/RichTextEditor/utils/plugins/LinkManager/components/LinkModal/LinkModal.mjs

@@ -1,69 +0,0 @@
-import React, { useState, useRef } from 'react';
-import '../../../../../../Modal/ConfirmationModal/ConfirmationModal.mjs';
-import '../../../../../../Modal/ContextModal/ContextModal.mjs';
-import '../../../../../../Modal/GenericModal/GenericModal.mjs';
-import '../../../../../../Modal/GenericModal/context/ModalContext.mjs';
-import '../../../../../../Modal/GenericModal/subcomponents/ModalAccessibleDescription/ModalAccessibleDescription.mjs';
-import '../../../../../../Modal/GenericModal/subcomponents/ModalFooter/ModalFooter.mjs';
-import '../../../../../../Modal/GenericModal/subcomponents/ModalHeader/ModalHeader.mjs';
-import '../../../../../../Modal/GenericModal/subcomponents/ModalAccessibleLabel/ModalAccessibleLabel.mjs';
-import '../../../../../../Modal/GenericModal/subcomponents/ModalBody/ModalBody.mjs';
-import { InputEditModal } from '../../../../../../Modal/InputEditModal/InputEditModal.mjs';
-import { TextField } from '../../../../../../TextField/TextField.mjs';
-import { validateLink } from '../../validation.mjs';
-const LinkModal = /*#__PURE__*/function () {
-  const LinkModal = function (_a) {
-    var onSubmit = _a.onSubmit,
-      onDismiss = _a.onDismiss,
-      onAfterLeave = _a.onAfterLeave,
-      isOpen = _a.isOpen,
-      defaultHref = _a.defaultHref;
-    var _b = useState(defaultHref || ""),
-      href = _b[0],
-      setHref = _b[1];
-    var _c = useState({
-        status: "default"
-      }),
-      validationStatus = _c[0],
-      setValidationStatus = _c[1];
-    var inputRef = useRef(null);
-    var handleSubmit = function () {
-      var _a;
-      var validation = validateLink(href);
-      if (validation.status !== "success") {
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        setValidationStatus(validation);
-        return;
-      }
-      onSubmit(href);
-    };
-    return /*#__PURE__*/React.createElement(InputEditModal, {
-      submitLabel: defaultHref ? "Save" : "Add",
-      mood: "positive",
-      isOpen: isOpen,
-      title: defaultHref ? "Edit link" : "Add link",
-      onSubmit: handleSubmit,
-      onDismiss: onDismiss,
-      onAfterLeave: onAfterLeave,
-      onAfterEnter: function () {
-        var _a;
-        return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      }
-    }, /*#__PURE__*/React.createElement(TextField, {
-      id: "href",
-      type: "text",
-      defaultValue: href !== null && href !== void 0 ? href : "",
-      labelText: "Link URL",
-      inputRef: inputRef,
-      validationMessage: validationStatus.message,
-      status: validationStatus.status,
-      onChange: function (e) {
-        setHref(e.target.value);
-      },
-      inline: true
-    }));
-  };
-  LinkModal.displayName = "LinkModal";
-  return LinkModal;
-}();
-export { LinkModal };