@luscii-healthtech/web-ui 37.6.7 → 38.0.0

package/dist/components/TextEditor/TextEditor.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 import type { Delta, EmitterSource } from "quill/core";
+import "quill-paste-smart";
 import "quill/dist/quill.snow.css";
 import "./TextEditor.scss";
 type Props = React.HTMLAttributes<HTMLDivElement> & {
@@ -57,10 +58,6 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
      * Placeholder text to show in the editor when it is empty.
      */
     placeholder?: string;
-    /**
-     * Allow inline styles in the editor when pasting from clipboard.
-     */
-    allowInlineStyle?: boolean;
 };
 type TextEditorToolbarOption = "bold" | "italic" | "underline" | "strike" | "link" | "video" | {
     list: "ordered";

package/dist/index.development.js

@@ -3,6 +3,7 @@
 var React = require('react');
 var classNames = require('classnames');
 var sonner = require('sonner');
+var DOMPurify = require('dompurify');
 var isString = require('lodash/isString');
 var lodash = require('lodash');
 var core = require('@dnd-kit/core');
@@ -28,7 +29,7 @@ var ReactSelect = require('react-select');
 var groupBy = require('lodash/groupBy');
 var RadixSwitch = require('@radix-ui/react-switch');
 var Quill = require('quill');
-var DOMPurify = require('dompurify');
+require('quill-paste-smart');
 require('quill/dist/quill.snow.css');
 var react = require('@headlessui/react');
 var solid = require('@heroicons/react/20/solid');
@@ -56,6 +57,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 var isString__default = /*#__PURE__*/_interopDefault(isString);
 var omit__default = /*#__PURE__*/_interopDefault(omit);
 var Tooltip__namespace = /*#__PURE__*/_interopNamespace(Tooltip);
@@ -69,7 +71,6 @@ var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
 var Quill__default = /*#__PURE__*/_interopDefault(Quill);
-var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 
 /******************************************************************************
@@ -1428,7 +1429,7 @@ const allowedGroupHoverColors = {
   white: "group-hover:ui-text-white"
 };
 const Text = (props) => {
-  var _a;
+  var _a, _b, _c;
   const { children, text, type, variant = "base", inline, color = "base", hoverColor, hoverInGroup, className, containsDangerousHtml, truncate, clampLines } = props, rest = __rest(props, ["children", "text", "type", "variant", "inline", "color", "hoverColor", "hoverInGroup", "className", "containsDangerousHtml", "truncate", "clampLines"]);
   const Component = inline ? "span" : "p";
   const resolvedVariant = type !== null && type !== void 0 ? type : variant;
@@ -1455,7 +1456,9 @@ const Text = (props) => {
       className
     )
   };
-  return containsDangerousHtml ? React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps, { dangerouslySetInnerHTML: { __html: (_a = children !== null && children !== void 0 ? children : text) !== null && _a !== void 0 ? _a : "" } })) : React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps), children !== null && children !== void 0 ? children : text);
+  return containsDangerousHtml ? React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps, { dangerouslySetInnerHTML: {
+    __html: (_c = (_b = DOMPurify__default.default.sanitize((_a = children === null || children === void 0 ? void 0 : children.toString()) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : DOMPurify__default.default.sanitize(text !== null && text !== void 0 ? text : "")) !== null && _c !== void 0 ? _c : ""
+  } })) : React__namespace.default.createElement(Component, Object.assign({}, rest, containerProps), children !== null && children !== void 0 ? children : text);
 };
 
 const TOASTER_TYPE_OPTIONS = {
@@ -6111,7 +6114,7 @@ const TextEditor = (_a) => {
     ["bold", "italic", "underline", "strike"],
     [{ list: "ordered" }, { list: "bullet" }],
     ["link"]
-  ], placeholder, onValueChange, allowInlineStyle = false } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "onValueChange", "allowInlineStyle"]);
+  ], placeholder, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "onValueChange"]);
   const defaultValueRef = React.useRef(defaultValue);
   const onTextChangeRef = React.useRef(onValueChange);
   const editorRef = React.useRef(null);
@@ -6131,25 +6134,8 @@ const TextEditor = (_a) => {
       });
       quill.on(Quill__default.default.events.TEXT_CHANGE, (value, _, source) => {
         var _a2;
-        (_a2 = onTextChangeRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(onTextChangeRef, !allowInlineStyle ? DOMPurify__default.default.sanitize(quill.getSemanticHTML(), {
-          FORBID_ATTR: ["style"]
-        }) : quill.getSemanticHTML(), value, source);
+        (_a2 = onTextChangeRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(onTextChangeRef, quill.getSemanticHTML(), value, source);
       });
-      if (!allowInlineStyle) {
-        quill.clipboard.addMatcher(Node.ELEMENT_NODE, (_, delta) => {
-          const ops = [];
-          const newDelta = delta;
-          newDelta.ops.forEach((op) => {
-            if (op === null || op === void 0 ? void 0 : op.attributes) {
-              delete op.attributes.color;
-              delete op.attributes.background;
-              ops.push(op);
-            }
-          });
-          newDelta.ops = ops;
-          return newDelta;
-        });
-      }
       if (defaultValueRef.current) {
         quill.setContents(quill.clipboard.convert({
           html: defaultValueRef.current