@bigbinary/neeto-editor-frontend 0.0.0-stage → 2.0.2

package/dist/chunk-CO-Yfs5R.js

@@ -0,0 +1,206 @@
+import { useRef, useEffect } from 'react';
+import { findIndexBy, truncate } from '@bigbinary/neeto-cist';
+import Left from '@bigbinary/neeto-icons/Left';
+import Right from '@bigbinary/neeto-icons/Right';
+import Modal from '@bigbinary/neetoui/Modal';
+import Typography from '@bigbinary/neetoui/Typography';
+import Button from '@bigbinary/neetoui/Button';
+import { isEmpty } from 'ramda';
+import { D as DocViewer, a as DocViewerRenderers } from './chunk-CeoqieEt.js';
+import { useTranslation, Trans } from 'react-i18next';
+import { c as convertToFileSize } from './chunk-CK_Ss-J5.js';
+import { d as downloadFile, c as checkPreviewAvailability, a as ATTACHMENTS_PREVIEW_DATA_CY } from './chunk-y5pmJStT.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import './chunk-BFTU3MAI.js';
+import '@babel/runtime/helpers/toConsumableArray';
+import '@babel/runtime/helpers/slicedToArray';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/asyncToGenerator';
+import '@babel/runtime/regenerator';
+import 'zustand/shallow';
+import 'axios';
+import '@bigbinary/neetoui/Toastr';
+import './chunk-BFKmIsWV.js';
+import '@babel/runtime/helpers/defineProperty';
+import '@bigbinary/neeto-commons-frontend/react-utils';
+import 'zustand';
+import '@babel/runtime/helpers/createClass';
+import '@babel/runtime/helpers/classCallCheck';
+import 'i18next';
+import '@bigbinary/neeto-icons/LeftAlign';
+import '@bigbinary/neeto-icons/CenterAlign';
+import '@bigbinary/neeto-icons/RightAlign';
+import '@bigbinary/neeto-icons/Delete';
+import '@bigbinary/neeto-icons/CustomSize';
+import '@bigbinary/neeto-icons/BorderDisable';
+import '@bigbinary/neeto-icons/BorderEnable';
+import '@bigbinary/neeto-icons/AspectRatio11';
+import '@bigbinary/neeto-icons/AspectRatio169';
+import '@bigbinary/neeto-icons/AspectRatio916';
+import '@bigbinary/neeto-icons/AspectRatio43';
+import '@bigbinary/neeto-icons/AspectRatio32';
+import '@bigbinary/neeto-commons-frontend/initializers';
+import 'yup';
+import './chunk-DrHVV_g1.js';
+import 'classnames';
+import './chunk-C2dztUxs.js';
+import '@bigbinary/neeto-commons-frontend/react-utils/useOnClickOutside';
+import '@bigbinary/neeto-commons-frontend/utils';
+import '@bigbinary/neeto-icons/MenuVertical';
+import '@bigbinary/neeto-icons/Close';
+import '@bigbinary/neeto-icons/Check';
+import '@bigbinary/neetoui/Dropdown';
+import '@bigbinary/neetoui/Input';
+import '@bigbinary/neetoui/Spinner';
+import '@bigbinary/neetoui/Tooltip';
+import '@bigbinary/neetoui/Alert';
+
+var Preview = function Preview(_ref) {
+  var onClose = _ref.onClose,
+    attachments = _ref.attachments,
+    selectedAttachment = _ref.selectedAttachment,
+    setSelectedAttachment = _ref.setSelectedAttachment,
+    setDidFetchPreviewBundle = _ref.setDidFetchPreviewBundle;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var downloadRef = useRef(null);
+  var _selectedAttachment$f = selectedAttachment.filename,
+    filename = _selectedAttachment$f === void 0 ? "" : _selectedAttachment$f,
+    _selectedAttachment$c = selectedAttachment.contentType,
+    contentType = _selectedAttachment$c === void 0 ? null : _selectedAttachment$c,
+    _selectedAttachment$u = selectedAttachment.url,
+    url = _selectedAttachment$u === void 0 ? "" : _selectedAttachment$u,
+    _selectedAttachment$s = selectedAttachment.signedId,
+    signedId = _selectedAttachment$s === void 0 ? "" : _selectedAttachment$s,
+    _selectedAttachment$s2 = selectedAttachment.size,
+    size = _selectedAttachment$s2 === void 0 ? undefined : _selectedAttachment$s2,
+    _selectedAttachment$p = selectedAttachment.previewUrl,
+    previewUrl = _selectedAttachment$p === void 0 ? null : _selectedAttachment$p;
+  var attachmentIndex = findIndexBy({
+    signedId: signedId
+  }, attachments);
+  var handleRightArrowClick = function handleRightArrowClick() {
+    var _downloadRef$current;
+    var newIndex = (attachmentIndex + 1) % attachments.length;
+    setSelectedAttachment(attachments[newIndex]);
+    (_downloadRef$current = downloadRef.current) === null || _downloadRef$current === void 0 || _downloadRef$current.focus();
+  };
+  var handleLeftArrowClick = function handleLeftArrowClick() {
+    var _downloadRef$current2;
+    var newIndex = (attachmentIndex - 1 + attachments.length) % attachments.length;
+    setSelectedAttachment(attachments[newIndex]);
+    (_downloadRef$current2 = downloadRef.current) === null || _downloadRef$current2 === void 0 || _downloadRef$current2.focus();
+  };
+  var handleKeyDown = function handleKeyDown(event) {
+    if (event.key === "ArrowRight") {
+      handleRightArrowClick();
+    } else if (event.key === "ArrowLeft") {
+      handleLeftArrowClick();
+    }
+  };
+  useEffect(function () {
+    setDidFetchPreviewBundle(true);
+  }, []);
+  var handleDownload = function handleDownload() {
+    return downloadFile(url, filename);
+  };
+  var setPreview = function setPreview() {
+    var isPreviewAvailable = checkPreviewAvailability(contentType, previewUrl);
+    if (isPreviewAvailable) {
+      switch (contentType.split("/")[0]) {
+        case "image":
+          return /*#__PURE__*/jsx("img", {
+            "data-testid": ATTACHMENTS_PREVIEW_DATA_CY,
+            src: previewUrl || url
+          });
+        case "video":
+          return /*#__PURE__*/jsx("video", {
+            controls: true,
+            "data-testid": ATTACHMENTS_PREVIEW_DATA_CY,
+            src: url
+          });
+        case "application":
+        case "text":
+          if (contentType === "application/pdf") {
+            return /*#__PURE__*/jsx("iframe", {
+              "data-testid": ATTACHMENTS_PREVIEW_DATA_CY,
+              src: url,
+              width: "100%"
+            });
+          }
+          return /*#__PURE__*/jsx(DocViewer, {
+            className: "ne-attachments-preview__body-docviewer",
+            "data-testid": ATTACHMENTS_PREVIEW_DATA_CY,
+            documents: [{
+              uri: url,
+              fileType: contentType
+            }],
+            pluginRenderers: DocViewerRenderers,
+            config: {
+              header: {
+                disableHeader: true,
+                disableFileName: true
+              }
+            }
+          });
+        default:
+          return null;
+      }
+    }
+    return /*#__PURE__*/jsx(Typography, {
+      children: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoEditor.attachments.noPreview",
+        components: {
+          span: /*#__PURE__*/jsx("span", {
+            className: "ne-attachments-preview__body-download",
+            onClick: handleDownload
+          })
+        }
+      })
+    });
+  };
+  return /*#__PURE__*/jsxs(Modal, {
+    onClose: onClose,
+    className: "ne-attachments-preview",
+    isOpen: !isEmpty(selectedAttachment),
+    size: "fullScreen",
+    onKeyDown: handleKeyDown,
+    children: [/*#__PURE__*/jsxs(Modal.Header, {
+      className: "ne-attachments-preview__header",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "ne-attachments-preview__header__fileinfo",
+        children: [/*#__PURE__*/jsx(Typography, {
+          style: "h4",
+          children: truncate(filename, 25)
+        }), /*#__PURE__*/jsx(Typography, {
+          style: "body2",
+          children: convertToFileSize(size)
+        })]
+      }), /*#__PURE__*/jsx(Button, {
+        "data-testid": "download-preview-button",
+        label: t("neetoEditor.common.download"),
+        ref: downloadRef,
+        style: "link",
+        onClick: handleDownload
+      })]
+    }), /*#__PURE__*/jsxs(Modal.Body, {
+      className: "ne-attachments-preview__body",
+      children: [/*#__PURE__*/jsx(Button, {
+        className: "ne-attachments-preview__body-left",
+        icon: Left,
+        size: "large",
+        style: "tertiary",
+        onClick: handleLeftArrowClick
+      }), /*#__PURE__*/jsx(Button, {
+        className: "ne-attachments-preview__body-right",
+        icon: Right,
+        size: "large",
+        style: "tertiary",
+        onClick: handleRightArrowClick
+      }), setPreview()]
+    })]
+  });
+};
+
+export { Preview as default };
+//# sourceMappingURL=chunk-CO-Yfs5R.js.map

package/dist/chunk-CO-Yfs5R.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chunk-CO-Yfs5R.js","sources":["../app/javascript/src/components/Attachments/Preview.jsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nimport { findIndexBy, truncate } from \"neetocist\";\nimport { Left, Right } from \"neetoicons\";\nimport { Modal, Typography, Button } from \"neetoui\";\nimport { isEmpty } from \"ramda\";\nimport DocViewer, { DocViewerRenderers } from \"react-doc-viewer\";\nimport { Trans, useTranslation } from \"react-i18next\";\n\nimport { convertToFileSize } from \"components/Editor/MediaUploader/utils\";\n\nimport { ATTACHMENTS_PREVIEW_DATA_CY } from \"./constants\";\nimport { checkPreviewAvailability, downloadFile } from \"./utils\";\n\nconst Preview = ({\n  onClose,\n  attachments,\n  selectedAttachment,\n  setSelectedAttachment,\n  setDidFetchPreviewBundle,\n}) => {\n  const { t } = useTranslation();\n  const downloadRef = useRef(null);\n\n  const {\n    filename = \"\",\n    contentType = null,\n    url = \"\",\n    signedId = \"\",\n    size = undefined,\n    previewUrl = null,\n  } = selectedAttachment;\n\n  const attachmentIndex = findIndexBy({ signedId }, attachments);\n\n  const handleRightArrowClick = () => {\n    const newIndex = (attachmentIndex + 1) % attachments.length;\n    setSelectedAttachment(attachments[newIndex]);\n    downloadRef.current?.focus();\n  };\n\n  const handleLeftArrowClick = () => {\n    const newIndex =\n      (attachmentIndex - 1 + attachments.length) % attachments.length;\n    setSelectedAttachment(attachments[newIndex]);\n    downloadRef.current?.focus();\n  };\n\n  const handleKeyDown = event => {\n    if (event.key === \"ArrowRight\") {\n      handleRightArrowClick();\n    } else if (event.key === \"ArrowLeft\") {\n      handleLeftArrowClick();\n    }\n  };\n\n  useEffect(() => {\n    setDidFetchPreviewBundle(true);\n  }, []);\n\n  const handleDownload = () => downloadFile(url, filename);\n\n  const setPreview = () => {\n    const isPreviewAvailable = checkPreviewAvailability(\n      contentType,\n      previewUrl\n    );\n\n    if (isPreviewAvailable) {\n      switch (contentType.split(\"/\")[0]) {\n        case \"image\":\n          return (\n            <img\n              data-testid={ATTACHMENTS_PREVIEW_DATA_CY}\n              src={previewUrl || url}\n            />\n          );\n        case \"video\":\n          return (\n            <video\n              controls\n              data-testid={ATTACHMENTS_PREVIEW_DATA_CY}\n              src={url}\n            />\n          );\n        case \"application\":\n        case \"text\":\n          if (contentType === \"application/pdf\") {\n            return (\n              <iframe\n                data-testid={ATTACHMENTS_PREVIEW_DATA_CY}\n                src={url}\n                width=\"100%\"\n              />\n            );\n          }\n\n          return (\n            <DocViewer\n              className=\"ne-attachments-preview__body-docviewer\"\n              data-testid={ATTACHMENTS_PREVIEW_DATA_CY}\n              documents={[{ uri: url, fileType: contentType }]}\n              pluginRenderers={DocViewerRenderers}\n              config={{\n                header: { disableHeader: true, disableFileName: true },\n              }}\n            />\n          );\n        default:\n          return null;\n      }\n    }\n\n    return (\n      <Typography>\n        <Trans\n          i18nKey=\"neetoEditor.attachments.noPreview\"\n          components={{\n            span: (\n              <span\n                className=\"ne-attachments-preview__body-download\"\n                onClick={handleDownload}\n              />\n            ),\n          }}\n        />\n      </Typography>\n    );\n  };\n\n  return (\n    <Modal\n      {...{ onClose }}\n      className=\"ne-attachments-preview\"\n      isOpen={!isEmpty(selectedAttachment)}\n      size=\"fullScreen\"\n      onKeyDown={handleKeyDown}\n    >\n      <Modal.Header className=\"ne-attachments-preview__header\">\n        <div className=\"ne-attachments-preview__header__fileinfo\">\n          <Typography style=\"h4\">{truncate(filename, 25)}</Typography>\n          <Typography style=\"body2\">{convertToFileSize(size)}</Typography>\n        </div>\n        <Button\n          data-testid=\"download-preview-button\"\n          label={t(\"neetoEditor.common.download\")}\n          ref={downloadRef}\n          style=\"link\"\n          onClick={handleDownload}\n        />\n      </Modal.Header>\n      <Modal.Body className=\"ne-attachments-preview__body\">\n        <Button\n          className=\"ne-attachments-preview__body-left\"\n          icon={Left}\n          size=\"large\"\n          style=\"tertiary\"\n          onClick={handleLeftArrowClick}\n        />\n        <Button\n          className=\"ne-attachments-preview__body-right\"\n          icon={Right}\n          size=\"large\"\n          style=\"tertiary\"\n          onClick={handleRightArrowClick}\n        />\n        {setPreview()}\n      </Modal.Body>\n    </Modal>\n  );\n};\n\nexport default Preview;\n"],"names":["Preview","_ref","onClose","attachments","selectedAttachment","setSelectedAttachment","setDidFetchPreviewBundle","_useTranslation","useTranslation","t","downloadRef","useRef","_selectedAttachment$f","filename","_selectedAttachment$c","contentType","_selectedAttachment$u","url","_selectedAttachment$s","signedId","_selectedAttachment$s2","size","undefined","_selectedAttachment$p","previewUrl","attachmentIndex","findIndexBy","handleRightArrowClick","_downloadRef$current","newIndex","length","current","focus","handleLeftArrowClick","_downloadRef$current2","handleKeyDown","event","key","useEffect","handleDownload","downloadFile","setPreview","isPreviewAvailable","checkPreviewAvailability","split","_jsx","ATTACHMENTS_PREVIEW_DATA_CY","src","controls","width","DocViewer","className","documents","uri","fileType","pluginRenderers","DocViewerRenderers","config","header","disableHeader","disableFileName","Typography","children","Trans","i18nKey","components","span","onClick","_jsxs","Modal","isOpen","isEmpty","onKeyDown","Header","style","truncate","convertToFileSize","Button","label","ref","Body","icon","Left","Right"],"mappings":"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"}

package/dist/chunk-CX-0IHKE.js

@@ -0,0 +1,381 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { createElement, useState, useRef, useEffect, memo } from 'react';
+import classnames from 'classnames';
+import DOMPurify from 'dompurify';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/v2/CopyToClipboardButton';
+import { isEmpty, isNil } from 'ramda';
+import { createRoot } from 'react-dom/client';
+import { a as EDITOR_SIZES } from './chunk-DrHVV_g1.js';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { l as lowlight, r as removeEmptyTags } from './chunk-Qg4uQqj3.js';
+import { H as HighlightJS } from './chunk-fDmcpgqx.js';
+import { findBy } from '@bigbinary/neeto-cist';
+import { renderToString } from 'react-dom/server';
+import './chunk-D52F37yF.js';
+import { Spinner, Button } from '@bigbinary/neeto-atoms';
+import { X } from 'lucide-react';
+import { useOnClickOutside } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var EDITOR_CONTENT_CLASS_NAME = "neeto-editor-content";
+var SANITIZE_OPTIONS = {
+  ADD_TAGS: ["iframe"],
+  ADD_ATTR: ["target", "allow", "allowfullscreen", "frameborder"]
+};
+var CODE_BLOCK_REGEX = /<pre(?:\s+[^>]+)?><code(?:\s+class="language-([^"]*)")?>([\S\s]*?)<\/code><\/pre>/gim;
+var VARIABLE_SPAN_REGEX = /<span data-variable="" [^>]*data-label="([^"]+)">{{([^}]+)}}<\/span>/g;
+var LANGUAGE_LIST = [].concat(_toConsumableArray(lowlight.listLanguages()), ["html"]);
+var EDITOR_CONTENT_DEFAULT_CONFIGURATION = {
+  enableHeaderLinks: false
+};
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var transformCode = function transformCode(code) {
+  return code.replace(/&gt;/g, ">").replace(/&lt;/g, "<").replace(/&amp;/g, "&");
+};
+var buildReactElementFromAST = function buildReactElementFromAST(element) {
+  if (element.tagName) {
+    var children = element.children ? element.children.map(buildReactElementFromAST) : null;
+    return /*#__PURE__*/createElement(element.tagName, element.properties, children);
+  }
+  return element.value;
+};
+var splitCodeBlockIntoLines = function splitCodeBlockIntoLines(codeBlock) {
+  codeBlock.innerHTML = codeBlock.innerHTML.replace(/([ \S]*\n|[ \S]*$)/gm, function (match) {
+    return "<div class=\"highlight-line\">".concat(match, "</div>");
+  });
+};
+var highlightLinesCode = function highlightLinesCode(code, options) {
+  if (options === undefined) {
+    return;
+  }
+  var paddingLeft = parseInt(window.getComputedStyle(code).paddingLeft);
+  var paddingRight = parseInt(window.getComputedStyle(code).paddingRight);
+  var lines = code.getElementsByClassName("highlight-line");
+  var scroll_width = code.scrollWidth;
+  // eslint-disable-next-line @bigbinary/neeto/use-array-methods
+  var _iterator = _createForOfIteratorHelper(options),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var option = _step.value;
+      for (var j = option.start; j <= option.end; ++j) {
+        if (j >= lines.length) return;
+        lines[j].style.backgroundColor = option.color;
+        lines[j].style.minWidth = "".concat(scroll_width - paddingLeft - paddingRight, "px");
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+};
+var highlightLinesElement = function highlightLinesElement(code, options) {
+  // eslint-disable-next-line @bigbinary/neeto/use-array-methods
+  var _iterator2 = _createForOfIteratorHelper(options),
+    _step2;
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var option = _step2.value;
+      --option.start;
+      --option.end;
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
+  }
+  highlightLinesCode(code, options);
+};
+var applySyntaxHighlightingAndLineNumbers = function applySyntaxHighlightingAndLineNumbers(content) {
+  lowlight.highlightAuto("");
+  var highlightedAST = {};
+  return content.replace(CODE_BLOCK_REGEX, function (_, language, code) {
+    var _highlightMatch$;
+    var highlightRegex = /data-highlighted-lines="([^"]*)"/;
+    var linenumbersRegex = /data-linenumbers/;
+    var highlightMatch = content.match(highlightRegex);
+    if (language && LANGUAGE_LIST.includes(language)) {
+      highlightedAST = lowlight.highlight(language, transformCode(code));
+    } else {
+      highlightedAST = HighlightJS.highlightAuto(transformCode(code))._emitter.root;
+      if (isEmpty(highlightedAST.children)) {
+        highlightedAST = lowlight.highlight("javascript", transformCode(code));
+      }
+    }
+    var highlightedNode = highlightedAST.children.map(buildReactElementFromAST);
+    var dataHighlight = "data-highlighted-lines=".concat((_highlightMatch$ = highlightMatch === null || highlightMatch === void 0 ? void 0 : highlightMatch[1]) !== null && _highlightMatch$ !== void 0 ? _highlightMatch$ : "");
+    var dataLinenumbers = content.match(linenumbersRegex) ? "data-linenumbers=\"true\"" : "";
+    return "<pre ".concat(dataLinenumbers, " ").concat(dataHighlight, "><code>").concat(renderToString(highlightedNode), "</code></pre>");
+  });
+};
+var applyLineHighlighting = function applyLineHighlighting(editorContent) {
+  var codeTags = editorContent === null || editorContent === void 0 ? void 0 : editorContent.querySelectorAll("pre code");
+  codeTags.forEach(function (codeTag) {
+    splitCodeBlockIntoLines(codeTag);
+    var highlightedLines = codeTag.closest("pre").getAttribute("data-highlighted-lines");
+    if (highlightedLines) {
+      var linesToHighlight = highlightedLines.split(",").map(Number).filter(Boolean);
+      var highlightLinesOptions = linesToHighlight.map(function (line) {
+        return {
+          start: line,
+          end: line,
+          color: "rgba(255, 255, 0, 0.2)"
+        };
+      });
+      highlightLinesElement(codeTag, highlightLinesOptions);
+    }
+  });
+};
+var substituteVariables = function substituteVariables(highlightedContent, variables) {
+  return highlightedContent.replace(VARIABLE_SPAN_REGEX, function (matchedSpan, _, key) {
+    var keySplitted = key.split(".");
+    if (keySplitted.length > 1) {
+      var category = findBy({
+        category: keySplitted[0]
+      }, variables);
+      var _variable = findBy({
+        key: keySplitted[1]
+      }, (category === null || category === void 0 ? void 0 : category.variables) || []);
+      return _variable !== null && _variable !== void 0 && _variable.value ? _variable.value : matchedSpan;
+    }
+    var variable = findBy({
+      key: keySplitted[0]
+    }, variables);
+    return variable !== null && variable !== void 0 && variable.value ? variable.value : matchedSpan;
+  });
+};
+var convertPlainTextToHtml = function convertPlainTextToHtml(htmlString) {
+  if (/^<[a-z].*>/i.test(htmlString.trim())) return htmlString;
+  return htmlString.split("\n").reduce(function (html, str) {
+    return "".concat(html, "<p>").concat(str, "</p>");
+  }, "");
+};
+
+var buildLinkSVG = function buildLinkSVG() {
+  var svgNS = "http://www.w3.org/2000/svg";
+  var svgWrapper = document.createElement("span");
+  svgWrapper.classList.add("header-link-icon-wrapper");
+  var svg = document.createElementNS(svgNS, "svg");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("height", "20");
+  svg.setAttribute("viewBox", "0 0 16 16");
+  svg.setAttribute("width", "20");
+  var path = document.createElementNS(svgNS, "path");
+  path.setAttribute("d", "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z");
+  svg.appendChild(path);
+  svgWrapper.appendChild(svg);
+  return svgWrapper;
+};
+var convertTextToId = function convertTextToId(text) {
+  return text.trim().toLowerCase().replace(/[^a-z0-9\s]/g, "").replace(/\s+/g, "-");
+};
+var buildHeaderLinks = function buildHeaderLinks(editorContentNode) {
+  var headerTags = editorContentNode.querySelectorAll("h1, h2, h3, h4, h5, h6");
+  var usedIds = new Map();
+  headerTags.forEach(function (heading) {
+    if (heading.getAttribute("data-link") === "false") {
+      return;
+    }
+    var headingId = convertTextToId(heading.textContent);
+    if (usedIds.has(headingId)) {
+      var count = usedIds.get(headingId);
+      usedIds.set(headingId, count + 1);
+      headingId = "".concat(headingId, "-").concat(count);
+    } else usedIds.set(headingId, 1);
+    heading.setAttribute("id", headingId);
+    var wrapper = document.createElement("div");
+    var anchor = document.createElement("a");
+    wrapper.classList.add("header-wrapper");
+    anchor.setAttribute("href", "#".concat(headingId));
+    anchor.classList.add("header-wrapper__link");
+    anchor.appendChild(buildLinkSVG());
+    wrapper.appendChild(heading.cloneNode(true));
+    wrapper.appendChild(anchor);
+    heading.replaceWith(wrapper);
+  });
+};
+
+var handleTodoCheckboxClick = function handleTodoCheckboxClick(event, editorContentRef, onChange) {
+  if (!(event.target.type === "checkbox" && event.target.closest('ul[data-type="todoList"] li[data-type="taskItem"]'))) {
+    return;
+  }
+  var checkbox = event.target;
+  var listItem = checkbox.closest("li");
+  if (listItem) {
+    listItem.setAttribute("data-checked", checkbox.checked.toString());
+    if (checkbox.checked) {
+      checkbox.setAttribute("checked", "checked");
+    } else {
+      checkbox.removeAttribute("checked");
+    }
+    onChange === null || onChange === void 0 || onChange(editorContentRef === null || editorContentRef === void 0 ? void 0 : editorContentRef.innerHTML);
+  }
+};
+var syncTodoCheckboxStates = function syncTodoCheckboxStates(editorContentRef) {
+  if (!editorContentRef) return;
+  var todoItems = editorContentRef.querySelectorAll("ul[data-type=\"todoList\"] li[data-type=\"taskItem\"]");
+  todoItems.forEach(function (listItem) {
+    var isChecked = listItem.getAttribute("data-checked") === "true";
+    var checkbox = listItem.querySelector('input[type="checkbox"]');
+    if (checkbox) {
+      checkbox.checked = isChecked;
+      if (isChecked) {
+        checkbox.setAttribute("checked", "checked");
+      } else {
+        checkbox.removeAttribute("checked");
+      }
+    }
+  });
+};
+
+var ImagePreview = function ImagePreview(_ref) {
+  var imagePreviewDetails = _ref.imagePreviewDetails,
+    setImagePreviewDetails = _ref.setImagePreviewDetails;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var imagePreviewRef = useRef(null);
+  useOnClickOutside(imagePreviewRef, function () {
+    return setImagePreviewDetails(null);
+  }, {
+    enabled: true
+  });
+  useEffect(function () {
+    if (!imagePreviewRef.current) return;
+    imagePreviewRef.current.setAttribute("tabindex", "-1");
+    imagePreviewRef.current.focus();
+  }, []);
+  var handleKeyDown = function handleKeyDown(e) {
+    e.stopPropagation();
+    e.key === "Escape" && setImagePreviewDetails(null);
+  };
+  return /*#__PURE__*/createPortal(/*#__PURE__*/jsxs("div", {
+    className: "ne-image-preview-wrapper active",
+    children: [isLoading && /*#__PURE__*/jsx(Spinner, {
+      className: "ne-image-preview-wrapper__spinner"
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames("ne-image-preview", {
+        "image-loaded": !isLoading
+      }),
+      children: [!isLoading && /*#__PURE__*/jsx("div", {
+        className: "close-button",
+        children: /*#__PURE__*/jsx(Button, {
+          icon: X,
+          variant: "secondary",
+          onClick: function onClick() {
+            return setImagePreviewDetails(null);
+          }
+        })
+      }), /*#__PURE__*/jsx("img", {
+        alt: t("neetoEditor.editorContent.imagePreviewAltText"),
+        ref: imagePreviewRef,
+        src: imagePreviewDetails.src,
+        onKeyDown: handleKeyDown,
+        onLoad: function onLoad() {
+          return setIsLoading(false);
+        }
+      }), imagePreviewDetails && /*#__PURE__*/jsx("p", {
+        className: "ne-image-preview__caption",
+        children: imagePreviewDetails.caption
+      })]
+    })]
+  }), document.body);
+};
+
+var _excluded = ["content", "variables", "className", "size", "configuration", "onChange", "onClick"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var EditorContent = function EditorContent(_ref) {
+  var _ref$content = _ref.content,
+    content = _ref$content === void 0 ? "" : _ref$content,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? EDITOR_SIZES.SMALL : _ref$size,
+    _ref$configuration = _ref.configuration,
+    configuration = _ref$configuration === void 0 ? EDITOR_CONTENT_DEFAULT_CONFIGURATION : _ref$configuration,
+    onChange = _ref.onChange,
+    onClick = _ref.onClick,
+    otherProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    imagePreviewDetails = _useState2[0],
+    setImagePreviewDetails = _useState2[1];
+  var editorContentRef = useRef(null);
+  var htmlContent = convertPlainTextToHtml(substituteVariables(applySyntaxHighlightingAndLineNumbers(removeEmptyTags(content)), variables));
+  var sanitize = DOMPurify.sanitize;
+  var handleContentClick = function handleContentClick(event) {
+    handleTodoCheckboxClick(event, editorContentRef.current, onChange);
+    onClick === null || onClick === void 0 || onClick(event);
+  };
+  var injectCopyButtonToCodeBlocks = function injectCopyButtonToCodeBlocks() {
+    var _editorContentRef$cur;
+    var preTags = (_editorContentRef$cur = editorContentRef.current) === null || _editorContentRef$cur === void 0 ? void 0 : _editorContentRef$cur.querySelectorAll(".".concat(EDITOR_CONTENT_CLASS_NAME, " pre"));
+    preTags.forEach(function (preTag) {
+      var button = document.createElement("div");
+      button.className = "neeto-editor-codeblock-options";
+      var root = createRoot(button);
+      root.render(/*#__PURE__*/jsx(CopyToClipboardButton, {
+        size: "sm",
+        value: preTag.textContent,
+        variant: "ghost"
+      }));
+      preTag.appendChild(button);
+    });
+  };
+  var bindImageClickListener = function bindImageClickListener() {
+    var _editorContentRef$cur2;
+    var figureTags = (_editorContentRef$cur2 = editorContentRef.current) === null || _editorContentRef$cur2 === void 0 ? void 0 : _editorContentRef$cur2.querySelectorAll(".".concat(EDITOR_CONTENT_CLASS_NAME, " figure"));
+    figureTags.forEach(function (figureTag) {
+      var image = figureTag.querySelector("img");
+      var link = figureTag.querySelector("a");
+      if (isNil(image) || isNil(link)) return;
+      figureTag.addEventListener("click", function (event) {
+        var _figureTag$querySelec;
+        event.preventDefault();
+        var caption = (_figureTag$querySelec = figureTag.querySelector("figcaption")) === null || _figureTag$querySelec === void 0 ? void 0 : _figureTag$querySelec.innerText;
+        setImagePreviewDetails({
+          src: image.src,
+          caption: caption
+        });
+      });
+    });
+  };
+  useEffect(function () {
+    injectCopyButtonToCodeBlocks();
+    bindImageClickListener();
+    syncTodoCheckboxStates(editorContentRef.current);
+    applyLineHighlighting(editorContentRef.current);
+    configuration.enableHeaderLinks && buildHeaderLinks(editorContentRef.current);
+  }, [content]);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", _objectSpread({
+      "data-testid": "neeto-editor-content",
+      ref: editorContentRef,
+      className: classnames(EDITOR_CONTENT_CLASS_NAME, _defineProperty(_defineProperty({}, className, className), "neeto-editor-size--".concat(size), true)),
+      dangerouslySetInnerHTML: {
+        __html: sanitize(htmlContent, SANITIZE_OPTIONS)
+      },
+      onClick: handleContentClick
+    }, otherProps)), imagePreviewDetails && /*#__PURE__*/jsx(ImagePreview, {
+      imagePreviewDetails: imagePreviewDetails,
+      setImagePreviewDetails: setImagePreviewDetails
+    })]
+  });
+};
+var index = /*#__PURE__*/memo(EditorContent);
+
+export { index as i, substituteVariables as s };
+//# sourceMappingURL=chunk-CX-0IHKE.js.map