@bigbinary/neeto-editor 1.43.6 → 1.43.8

package/dist/EditorContent.js

@@ -8,7 +8,7 @@ import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardBut
 import { isNil } from 'ramda';
 import { createRoot } from 'react-dom/client';
 import { n } from './chunk-15c449f1.js';
-import { s as substituteVariables, h as highlightCode, E as EDITOR_CONTENT_CLASSNAME, S as SANITIZE_OPTIONS } from './chunk-e712f06d.js';
+import { s as substituteVariables, h as highlightCode, a as applyLineHighlighting, E as EDITOR_CONTENT_CLASSNAME, S as SANITIZE_OPTIONS } from './chunk-98e9b1c3.js';
 import { useOnClickOutside } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Close from '@bigbinary/neeto-icons/Close';
 import Button from '@bigbinary/neetoui/Button';
@@ -22,7 +22,7 @@ import '@bigbinary/neeto-cist';
 import 'react-dom/server';
 import '@babel/runtime/helpers/toConsumableArray';
 
-var css = "@charset \"UTF-8\";@import url(\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css\");.neeto-editor-content{-moz-tab-size:2;-o-tab-size:2;tab-size:2;white-space:pre-wrap;word-break:break-word}.neeto-editor-content h1,.neeto-editor-content h2,.neeto-editor-content h3,.neeto-editor-content h4,.neeto-editor-content h5,.neeto-editor-content h6{color:rgb(var(--neeto-ui-black));font-weight:var(--neeto-ui-font-semibold)}.neeto-editor-content h1 strong,.neeto-editor-content h2 strong,.neeto-editor-content h3 strong,.neeto-editor-content h4 strong,.neeto-editor-content h5 strong,.neeto-editor-content h6 strong{font-weight:var(--neeto-ui-font-semibold)!important}.neeto-editor-content h1{font-size:var(--neeto-ui-text-h1);margin:2rem 0 .25rem}.neeto-editor-content h2{font-size:var(--neeto-ui-text-h2);margin:1.5rem 0 .25rem}.neeto-editor-content h3{font-size:var(--neeto-ui-text-h3);margin:1rem 0 .25rem}.neeto-editor-content h4{font-size:var(--neeto-ui-text-h4);margin:.75rem 0 .25rem}.neeto-editor-content h5{font-size:var(--neeto-ui-text-h5);margin:.75rem 0 .25rem}.neeto-editor-content h6{font-size:var(--neeto-ui-text-h6);margin:.75rem 0 .25rem}@media only screen and (max-width:720px){.neeto-editor-content h1{font-size:22px}.neeto-editor-content h2{font-size:20px}.neeto-editor-content h3{font-size:18px}.neeto-editor-content h4{font-size:16px}.neeto-editor-content h5{font-size:14px}.neeto-editor-content h6{font-size:12px}}.neeto-editor-content p{color:rgb(var(--neeto-ui-black));font-size:var(--neeto-ui-text-body1);font-weight:var(--neeto-ui-font-normal);line-height:var(--neeto-ui-leading-normal)}.neeto-editor-content p:empty:after{content:\" \"}.neeto-editor-content p:last-child{margin-bottom:0}.neeto-editor-content p strong{font-weight:var(--neeto-ui-font-semibold)!important}.neeto-editor-content div{color:rgb(var(--neeto-ui-black));font-size:var(--neeto-ui-text-body1);font-weight:var(--neeto-ui-font-normal);line-height:var(--neeto-ui-leading-normal)}.neeto-editor-content code{background-color:rgb(var(--neeto-ui-gray-100));border-radius:var(--neeto-ui-rounded-sm);font-family:SFMono-Regular,Menlo,Consolas,PT Mono,Liberation Mono,Courier,monospace;font-size:14px;padding:.2em .4em}.neeto-editor-content h1 code,.neeto-editor-content h2 code,.neeto-editor-content h3 code,.neeto-editor-content h4 code,.neeto-editor-content h5 code,.neeto-editor-content h6 code,.neeto-editor-content p code{font-size:inherit}.neeto-editor-content pre{background-color:#f7f6f3;border-radius:var(--neeto-ui-rounded-sm);font-size:14px;line-height:1.5;margin-bottom:16px;margin-top:16px;overflow-x:auto;padding:32px 12px 12px;position:relative}.neeto-editor-content pre .neeto-editor-codeblock-options{align-items:center;display:flex;gap:4px;position:absolute;right:4px;top:4px}.neeto-editor-content pre .neeto-editor-codeblock-options__menu{display:flex;flex-direction:column;gap:4px}.neeto-editor-content pre .neeto-editor-codeblock-options__input{margin:4px}.neeto-editor-content pre>code{background-color:transparent;border-radius:0;border-width:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:400;line-height:inherit;padding:0;white-space:pre-wrap}.neeto-editor-content blockquote{border-left-color:#e5e7eb;border-left-width:4px;color:rgb(var(--neeto-ui-black));font-weight:var(--neeto-ui-font-medium);margin:8px 0;padding-left:12px;quotes:\"“\" \"”\" \"‘\" \"’\"}.neeto-editor-content blockquote>p:after,.neeto-editor-content blockquote>p:before{content:\"\"!important}.neeto-editor-content ol,.neeto-editor-content ul{list-style:revert;margin-bottom:1em;padding-left:28px}.neeto-editor-content ol li:before,.neeto-editor-content ul li:before{background-color:rgb(var(--neeto-ui-black))}.neeto-editor-content a[href]{color:rgb(var(--neeto-ui-accent-800));font-weight:500}.neeto-editor-content .neeto-editor__video-wrapper{display:flex;margin:16px 0}.neeto-editor-content .neeto-editor__video-wrapper .neeto-editor__video-iframe{border:2px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-lg);display:inline-block;padding:4px}.neeto-editor-content .neeto-editor__video-wrapper .neeto-editor__video-iframe iframe{height:100%;width:100%}.neeto-editor-content .neeto-editor__video--left{justify-content:flex-start}.neeto-editor-content .neeto-editor__video--right{justify-content:flex-end}.neeto-editor-content .neeto-editor__video--center{justify-content:center}.neeto-editor-content mark{border-radius:var(--neeto-ui-rounded-sm);padding:0}.neeto-editor-content [data-type=mention],.neeto-editor-content [data-type=special-mention]{color:rgb(var(--neeto-ui-accent-800))}.neeto-editor-content table{border:1px solid rgba(var(--neeto-ui-gray-300));border-collapse:separate;border-radius:var(--neeto-ui-rounded-sm);border-spacing:0;min-width:300px;overflow:hidden;table-layout:fixed}.neeto-editor-content table td,.neeto-editor-content table th{border-left:1px solid rgba(var(--neeto-ui-gray-300));border-top:1px solid rgba(var(--neeto-ui-gray-300));padding:8px 12px;position:relative}.neeto-editor-content table td:first-child,.neeto-editor-content table th:first-child{border-left:none}.neeto-editor-content table th{background:rgb(var(--neeto-ui-gray-100));border-top:none}.neeto-editor-content table td{background:rgb(var(--neeto-ui-white))}.neeto-editor-content--hidden{display:none}.neeto-editor__image-wrapper{color:inherit!important;display:flex;font-weight:400!important;margin:16px 0;padding-left:3px;text-decoration:none}.neeto-editor__image-wrapper figure{display:inline-block;max-width:100%;overflow:hidden;position:relative}.neeto-editor__image-wrapper .neeto-editor__image{border:2px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-lg);display:inline-block;min-height:52px;padding:4px}.neeto-editor__image-wrapper .neeto-editor__image img,.neeto-editor__image-wrapper .neeto-editor__image video{display:inline-block;height:auto;width:100%}.neeto-editor__image-wrapper .neeto-editor__image img.hidden,.neeto-editor__image-wrapper .neeto-editor__image video.hidden{display:none}.neeto-editor__image-wrapper .neeto-editor__image img{cursor:zoom-in}.neeto-editor__image-wrapper .neeto-editor__image-placeholder{align-items:center;border:1px solid;border-radius:8px;display:flex;height:200px;justify-content:center;width:400px}.neeto-editor__image-wrapper figcaption div{color:rgb(var(--neeto-ui-gray-600));font-size:14px;font-weight:var(--neeto-ui-font-normal);line-height:1.4;text-align:center}.neeto-editor__image-wrapper figcaption div a{display:inline-block;margin:0;text-align:center}.neeto-editor__image-wrapper figcaption.is-empty div:before{color:rgb(var(--neeto-ui-gray-500));content:\"Add a caption\";inset:0;position:absolute}.neeto-editor__image-wrapper:has(img:not([src])){display:none}.neeto-editor-content figcaption{color:#6b7280;font-size:14px;font-weight:400;line-height:1.4;text-align:center}.neeto-editor__image--left{justify-content:flex-start}.neeto-editor__image--center{justify-content:center}.neeto-editor__image--right{justify-content:flex-end}.selected-text{background-color:rgb(var(--neeto-ui-gray-300));padding:2px 0}.ne-image-preview-wrapper{align-items:center;background:rgba(var(--neeto-ui-gray-800),.5);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:999999}.ne-image-preview-wrapper .ne-image-preview{background:rgb(var(--neeto-ui-white));display:flex;flex-direction:column;gap:10px;max-width:60vw;opacity:0;transition:opacity .1s ease-in-out}.ne-image-preview-wrapper .ne-image-preview.image-loaded{border-radius:10px;opacity:1;padding:10px}.ne-image-preview-wrapper .ne-image-preview__caption{color:rgb(var(--neeto-ui-gray-800));line-height:1.5}.ne-image-preview-wrapper .close-button{position:absolute;right:5px;top:5px}.ne-image-preview-wrapper .image-preview{max-height:70%;max-width:70%}.ne-image-preview-wrapper__spinner{position:absolute}.ne-image-preview-wrapper__spinner i{background-color:rgb(var(--neeto-ui-gray-300))}";
+var css = "@charset \"UTF-8\";@import url(\"https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/github.min.css\");.neeto-editor-content{-moz-tab-size:2;-o-tab-size:2;tab-size:2;white-space:pre-wrap;word-break:break-word}.neeto-editor-content h1,.neeto-editor-content h2,.neeto-editor-content h3,.neeto-editor-content h4,.neeto-editor-content h5,.neeto-editor-content h6{color:rgb(var(--neeto-ui-black));font-weight:var(--neeto-ui-font-semibold)}.neeto-editor-content h1 strong,.neeto-editor-content h2 strong,.neeto-editor-content h3 strong,.neeto-editor-content h4 strong,.neeto-editor-content h5 strong,.neeto-editor-content h6 strong{font-weight:var(--neeto-ui-font-semibold)!important}.neeto-editor-content h1{font-size:var(--neeto-ui-text-h1);margin:2rem 0 .25rem}.neeto-editor-content h2{font-size:var(--neeto-ui-text-h2);margin:1.5rem 0 .25rem}.neeto-editor-content h3{font-size:var(--neeto-ui-text-h3);margin:1rem 0 .25rem}.neeto-editor-content h4{font-size:var(--neeto-ui-text-h4);margin:.75rem 0 .25rem}.neeto-editor-content h5{font-size:var(--neeto-ui-text-h5);margin:.75rem 0 .25rem}.neeto-editor-content h6{font-size:var(--neeto-ui-text-h6);margin:.75rem 0 .25rem}@media only screen and (max-width:720px){.neeto-editor-content h1{font-size:22px}.neeto-editor-content h2{font-size:20px}.neeto-editor-content h3{font-size:18px}.neeto-editor-content h4{font-size:16px}.neeto-editor-content h5{font-size:14px}.neeto-editor-content h6{font-size:12px}}.neeto-editor-content p{color:rgb(var(--neeto-ui-black));font-size:var(--neeto-ui-text-body1);font-weight:var(--neeto-ui-font-normal);line-height:var(--neeto-ui-leading-normal)}.neeto-editor-content p:empty:after{content:\" \"}.neeto-editor-content p:last-child{margin-bottom:0}.neeto-editor-content p strong{font-weight:var(--neeto-ui-font-semibold)!important}.neeto-editor-content div{color:rgb(var(--neeto-ui-black));font-size:var(--neeto-ui-text-body1);font-weight:var(--neeto-ui-font-normal);line-height:var(--neeto-ui-leading-normal)}.neeto-editor-content code{background-color:rgb(var(--neeto-ui-gray-100));border-radius:var(--neeto-ui-rounded-sm);font-family:SFMono-Regular,Menlo,Consolas,PT Mono,Liberation Mono,Courier,monospace;font-size:14px;padding:.2em .4em}.neeto-editor-content h1 code,.neeto-editor-content h2 code,.neeto-editor-content h3 code,.neeto-editor-content h4 code,.neeto-editor-content h5 code,.neeto-editor-content h6 code,.neeto-editor-content p code{font-size:inherit}.neeto-editor-content pre{background-color:#f7f6f3;border-radius:var(--neeto-ui-rounded-sm);font-size:14px;line-height:1.5;margin-bottom:16px;margin-top:16px;overflow-x:auto;padding:32px 12px 12px;position:relative}.neeto-editor-content pre .neeto-editor-codeblock-options{align-items:center;display:flex;gap:4px;position:absolute;right:4px;top:4px}.neeto-editor-content pre .neeto-editor-codeblock-options__menu{display:flex;flex-direction:column;gap:4px}.neeto-editor-content pre .neeto-editor-codeblock-options__input{margin:4px}.neeto-editor-content pre .highlight-line{position:relative}.neeto-editor-content pre .highlight-line:before{left:-12px}.neeto-editor-content pre .highlight-line:after{right:-12px}.neeto-editor-content pre .highlight-line:after,.neeto-editor-content pre .highlight-line:before{background-color:inherit;content:\"\";height:25px;position:absolute;top:0;width:12px}.neeto-editor-content pre>code{background-color:transparent;border-radius:0;border-width:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:400;line-height:inherit;padding:0;white-space:pre-wrap}.neeto-editor-content blockquote{border-left-color:#e5e7eb;border-left-width:4px;color:rgb(var(--neeto-ui-black));font-weight:var(--neeto-ui-font-medium);margin:8px 0;padding-left:12px;quotes:\"“\" \"”\" \"‘\" \"’\"}.neeto-editor-content blockquote>p:after,.neeto-editor-content blockquote>p:before{content:\"\"!important}.neeto-editor-content ol,.neeto-editor-content ul{list-style:revert;margin-bottom:1em;padding-left:28px}.neeto-editor-content ol li:before,.neeto-editor-content ul li:before{background-color:rgb(var(--neeto-ui-black))}.neeto-editor-content a[href]{color:rgb(var(--neeto-ui-accent-800));font-weight:500}.neeto-editor-content .neeto-editor__video-wrapper{display:flex;margin:16px 0}.neeto-editor-content .neeto-editor__video-wrapper .neeto-editor__video-iframe{border:2px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-lg);display:inline-block;padding:4px}.neeto-editor-content .neeto-editor__video-wrapper .neeto-editor__video-iframe iframe{height:100%;width:100%}.neeto-editor-content .neeto-editor__video--left{justify-content:flex-start}.neeto-editor-content .neeto-editor__video--right{justify-content:flex-end}.neeto-editor-content .neeto-editor__video--center{justify-content:center}.neeto-editor-content mark{border-radius:var(--neeto-ui-rounded-sm);padding:0}.neeto-editor-content [data-type=mention],.neeto-editor-content [data-type=special-mention]{color:rgb(var(--neeto-ui-accent-800))}.neeto-editor-content table{border:1px solid rgba(var(--neeto-ui-gray-300));border-collapse:separate;border-radius:var(--neeto-ui-rounded-sm);border-spacing:0;min-width:300px;overflow:hidden;table-layout:fixed}.neeto-editor-content table td,.neeto-editor-content table th{border-left:1px solid rgba(var(--neeto-ui-gray-300));border-top:1px solid rgba(var(--neeto-ui-gray-300));padding:8px 12px;position:relative}.neeto-editor-content table td:first-child,.neeto-editor-content table th:first-child{border-left:none}.neeto-editor-content table th{background:rgb(var(--neeto-ui-gray-100));border-top:none}.neeto-editor-content table td{background:rgb(var(--neeto-ui-white))}.neeto-editor-content--hidden{display:none}.neeto-editor__image-wrapper{color:inherit!important;display:flex;font-weight:400!important;margin:16px 0;padding-left:3px;text-decoration:none}.neeto-editor__image-wrapper figure{display:inline-block;max-width:100%;overflow:hidden;position:relative}.neeto-editor__image-wrapper .neeto-editor__image{border:2px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-lg);display:inline-block;min-height:52px;padding:4px}.neeto-editor__image-wrapper .neeto-editor__image img,.neeto-editor__image-wrapper .neeto-editor__image video{display:inline-block;height:auto;width:100%}.neeto-editor__image-wrapper .neeto-editor__image img.hidden,.neeto-editor__image-wrapper .neeto-editor__image video.hidden{display:none}.neeto-editor__image-wrapper .neeto-editor__image img{cursor:zoom-in}.neeto-editor__image-wrapper .neeto-editor__image-placeholder{align-items:center;border:1px solid;border-radius:8px;display:flex;height:200px;justify-content:center;width:400px}.neeto-editor__image-wrapper figcaption div{color:rgb(var(--neeto-ui-gray-600));font-size:14px;font-weight:var(--neeto-ui-font-normal);line-height:1.4;text-align:center}.neeto-editor__image-wrapper figcaption div a{display:inline-block;margin:0;text-align:center}.neeto-editor__image-wrapper figcaption.is-empty div:before{color:rgb(var(--neeto-ui-gray-500));content:\"Add a caption\";inset:0;position:absolute}.neeto-editor__image-wrapper:has(img:not([src])){display:none}.neeto-editor-content figcaption{color:#6b7280;font-size:14px;font-weight:400;line-height:1.4;text-align:center}.neeto-editor__image--left{justify-content:flex-start}.neeto-editor__image--center{justify-content:center}.neeto-editor__image--right{justify-content:flex-end}.selected-text{background-color:rgb(var(--neeto-ui-gray-300));padding:2px 0}.ne-image-preview-wrapper{align-items:center;background:rgba(var(--neeto-ui-gray-800),.5);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:999999}.ne-image-preview-wrapper .ne-image-preview{background:rgb(var(--neeto-ui-white));display:flex;flex-direction:column;gap:10px;max-width:60vw;opacity:0;transition:opacity .1s ease-in-out}.ne-image-preview-wrapper .ne-image-preview.image-loaded{border-radius:10px;opacity:1;padding:10px}.ne-image-preview-wrapper .ne-image-preview__caption{color:rgb(var(--neeto-ui-gray-800));line-height:1.5}.ne-image-preview-wrapper .close-button{position:absolute;right:5px;top:5px}.ne-image-preview-wrapper .image-preview{max-height:70%;max-width:70%}.ne-image-preview-wrapper__spinner{position:absolute}.ne-image-preview-wrapper__spinner i{background-color:rgb(var(--neeto-ui-gray-300))}";
 n(css,{});
 
 var ImagePreview = function ImagePreview(_ref) {
@@ -134,6 +134,7 @@ var EditorContent = function EditorContent(_ref) {
   useEffect(function () {
     injectCopyButtonToCodeBlocks();
     bindImageClickListener();
+    applyLineHighlighting(editorContentRef.current);
   }, [content]);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx("div", _objectSpread({

package/dist/EditorContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditorContent.js","sources":["../src/components/EditorContent/ImagePreview.jsx","../src/components/EditorContent/index.jsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport { useOnClickOutside } from \"neetocommons/react-utils\";\nimport { Close } from \"neetoicons\";\nimport { Button, Spinner } from \"neetoui\";\nimport { createPortal } from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\n\nconst ImagePreview = ({ imagePreviewDetails, setImagePreviewDetails }) => {\n  const [isLoading, setIsLoading] = useState(true);\n\n  const { t } = useTranslation();\n\n  const imagePreviewRef = useRef(null);\n\n  useOnClickOutside(imagePreviewRef, () => setImagePreviewDetails(null), {\n    enabled: true,\n  });\n\n  useEffect(() => {\n    document.addEventListener(\n      \"keydown\",\n      e => e.key === \"Escape\" && setImagePreviewDetails(null)\n    );\n\n    return () =>\n      document.removeEventListener(\n        \"keydown\",\n        e => e.key === \"Escape\" && setImagePreviewDetails(null)\n      );\n  }, []);\n\n  return createPortal(\n    <div className=\"ne-image-preview-wrapper\">\n      {isLoading && <Spinner className=\"ne-image-preview-wrapper__spinner\" />}\n      {!isLoading && (\n        <div className=\"close-button\">\n          <Button\n            icon={Close}\n            style=\"secondary\"\n            onClick={() => setImagePreviewDetails(null)}\n          />\n        </div>\n      )}\n      <div\n        className={classnames(\"ne-image-preview\", {\n          \"image-loaded\": !isLoading,\n        })}\n      >\n        <img\n          alt={t(\"neetoEditor.editorContent.imagePreviewAltText\")}\n          ref={imagePreviewRef}\n          src={imagePreviewDetails.src}\n          onLoad={() => setIsLoading(false)}\n        />\n        {imagePreviewDetails && (\n          <p className=\"ne-image-preview__caption\">\n            {imagePreviewDetails.caption}\n          </p>\n        )}\n      </div>\n    </div>,\n    document.body\n  );\n};\n\nexport default ImagePreview;\n","import { memo, useEffect, useRef, useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport DOMPurify from \"dompurify\";\nimport CopyToClipboardButton from \"neetomolecules/CopyToClipboardButton\";\nimport { isNil } from \"ramda\";\nimport { createRoot } from \"react-dom/client\";\n\nimport \"src/styles/editor/editor-content.scss\";\n\nimport { EDITOR_CONTENT_CLASSNAME, SANITIZE_OPTIONS } from \"./constants\";\nimport ImagePreview from \"./ImagePreview\";\nimport { highlightCode, substituteVariables } from \"./utils\";\n\nconst EditorContent = ({\n  content = \"\",\n  variables = [],\n  className,\n  ...otherProps\n}) => {\n  const [imagePreviewDetails, setImagePreviewDetails] = useState(null);\n  const editorContentRef = useRef(null);\n\n  const htmlContent = substituteVariables(highlightCode(content), variables);\n  const sanitize = DOMPurify.sanitize;\n\n  const injectCopyButtonToCodeBlocks = () => {\n    const preTags = editorContentRef.current?.querySelectorAll(\n      `.${EDITOR_CONTENT_CLASSNAME} pre`\n    );\n\n    preTags.forEach(preTag => {\n      const button = document.createElement(\"div\");\n      button.className = \"neeto-editor-codeblock-options\";\n      const root = createRoot(button);\n      root.render(\n        <CopyToClipboardButton\n          size=\"small\"\n          style=\"text\"\n          value={preTag.textContent}\n        />\n      );\n      preTag.appendChild(button);\n    });\n  };\n\n  const bindImageClickListener = () => {\n    const figureTags = editorContentRef.current?.querySelectorAll(\n      `.${EDITOR_CONTENT_CLASSNAME} figure`\n    );\n\n    figureTags.forEach(figureTag => {\n      const image = figureTag.querySelector(\"img\");\n      const link = figureTag.querySelector(\"a\");\n      if (isNil(image) || isNil(link)) return;\n\n      figureTag.addEventListener(\"click\", event => {\n        event.preventDefault();\n        const caption = figureTag.querySelector(\"figcaption\").innerText;\n        setImagePreviewDetails({ src: image.src, caption });\n      });\n    });\n  };\n\n  useEffect(() => {\n    injectCopyButtonToCodeBlocks();\n    bindImageClickListener();\n  }, [content]);\n\n  return (\n    <>\n      <div\n        data-cy=\"neeto-editor-content\"\n        ref={editorContentRef}\n        className={classnames(EDITOR_CONTENT_CLASSNAME, {\n          [className]: className,\n        })}\n        dangerouslySetInnerHTML={{\n          __html: sanitize(htmlContent, SANITIZE_OPTIONS),\n        }}\n        {...otherProps}\n      />\n      {imagePreviewDetails && (\n        <ImagePreview {...{ imagePreviewDetails, setImagePreviewDetails }} />\n      )}\n    </>\n  );\n};\n\nexport default memo(EditorContent);\n"],"names":["ImagePreview","_ref","imagePreviewDetails","setImagePreviewDetails","_useState","useState","_useState2","_slicedToArray","isLoading","setIsLoading","_useTranslation","useTranslation","t","imagePreviewRef","useRef","useOnClickOutside","enabled","useEffect","document","addEventListener","e","key","removeEventListener","createPortal","_jsxs","className","children","_jsx","Spinner","Button","icon","Close","style","onClick","classnames","alt","ref","src","onLoad","caption","body","EditorContent","_ref$content","content","_ref$variables","variables","otherProps","_objectWithoutProperties","_excluded","editorContentRef","htmlContent","substituteVariables","highlightCode","sanitize","DOMPurify","injectCopyButtonToCodeBlocks","_editorContentRef$cur","preTags","current","querySelectorAll","concat","EDITOR_CONTENT_CLASSNAME","forEach","preTag","button","createElement","root","createRoot","render","CopyToClipboardButton","size","value","textContent","appendChild","bindImageClickListener","_editorContentRef$cur2","figureTags","figureTag","image","querySelector","link","isNil","event","preventDefault","innerText","_Fragment","_objectSpread","_defineProperty","dangerouslySetInnerHTML","__html","SANITIZE_OPTIONS","memo"],"mappings":"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"}
+{"version":3,"file":"EditorContent.js","sources":["../src/components/EditorContent/ImagePreview.jsx","../src/components/EditorContent/index.jsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport { useOnClickOutside } from \"neetocommons/react-utils\";\nimport { Close } from \"neetoicons\";\nimport { Button, Spinner } from \"neetoui\";\nimport { createPortal } from \"react-dom\";\nimport { useTranslation } from \"react-i18next\";\n\nconst ImagePreview = ({ imagePreviewDetails, setImagePreviewDetails }) => {\n  const [isLoading, setIsLoading] = useState(true);\n\n  const { t } = useTranslation();\n\n  const imagePreviewRef = useRef(null);\n\n  useOnClickOutside(imagePreviewRef, () => setImagePreviewDetails(null), {\n    enabled: true,\n  });\n\n  useEffect(() => {\n    document.addEventListener(\n      \"keydown\",\n      e => e.key === \"Escape\" && setImagePreviewDetails(null)\n    );\n\n    return () =>\n      document.removeEventListener(\n        \"keydown\",\n        e => e.key === \"Escape\" && setImagePreviewDetails(null)\n      );\n  }, []);\n\n  return createPortal(\n    <div className=\"ne-image-preview-wrapper\">\n      {isLoading && <Spinner className=\"ne-image-preview-wrapper__spinner\" />}\n      {!isLoading && (\n        <div className=\"close-button\">\n          <Button\n            icon={Close}\n            style=\"secondary\"\n            onClick={() => setImagePreviewDetails(null)}\n          />\n        </div>\n      )}\n      <div\n        className={classnames(\"ne-image-preview\", {\n          \"image-loaded\": !isLoading,\n        })}\n      >\n        <img\n          alt={t(\"neetoEditor.editorContent.imagePreviewAltText\")}\n          ref={imagePreviewRef}\n          src={imagePreviewDetails.src}\n          onLoad={() => setIsLoading(false)}\n        />\n        {imagePreviewDetails && (\n          <p className=\"ne-image-preview__caption\">\n            {imagePreviewDetails.caption}\n          </p>\n        )}\n      </div>\n    </div>,\n    document.body\n  );\n};\n\nexport default ImagePreview;\n","import { memo, useEffect, useRef, useState } from \"react\";\n\nimport classnames from \"classnames\";\nimport DOMPurify from \"dompurify\";\nimport CopyToClipboardButton from \"neetomolecules/CopyToClipboardButton\";\nimport { isNil } from \"ramda\";\nimport { createRoot } from \"react-dom/client\";\n\nimport \"src/styles/editor/editor-content.scss\";\n\nimport { EDITOR_CONTENT_CLASSNAME, SANITIZE_OPTIONS } from \"./constants\";\nimport ImagePreview from \"./ImagePreview\";\nimport {\n  highlightCode,\n  substituteVariables,\n  applyLineHighlighting,\n} from \"./utils\";\n\nconst EditorContent = ({\n  content = \"\",\n  variables = [],\n  className,\n  ...otherProps\n}) => {\n  const [imagePreviewDetails, setImagePreviewDetails] = useState(null);\n  const editorContentRef = useRef(null);\n\n  const htmlContent = substituteVariables(highlightCode(content), variables);\n  const sanitize = DOMPurify.sanitize;\n\n  const injectCopyButtonToCodeBlocks = () => {\n    const preTags = editorContentRef.current?.querySelectorAll(\n      `.${EDITOR_CONTENT_CLASSNAME} pre`\n    );\n\n    preTags.forEach(preTag => {\n      const button = document.createElement(\"div\");\n      button.className = \"neeto-editor-codeblock-options\";\n      const root = createRoot(button);\n      root.render(\n        <CopyToClipboardButton\n          size=\"small\"\n          style=\"text\"\n          value={preTag.textContent}\n        />\n      );\n      preTag.appendChild(button);\n    });\n  };\n\n  const bindImageClickListener = () => {\n    const figureTags = editorContentRef.current?.querySelectorAll(\n      `.${EDITOR_CONTENT_CLASSNAME} figure`\n    );\n\n    figureTags.forEach(figureTag => {\n      const image = figureTag.querySelector(\"img\");\n      const link = figureTag.querySelector(\"a\");\n      if (isNil(image) || isNil(link)) return;\n\n      figureTag.addEventListener(\"click\", event => {\n        event.preventDefault();\n        const caption = figureTag.querySelector(\"figcaption\").innerText;\n        setImagePreviewDetails({ src: image.src, caption });\n      });\n    });\n  };\n\n  useEffect(() => {\n    injectCopyButtonToCodeBlocks();\n    bindImageClickListener();\n    applyLineHighlighting(editorContentRef.current);\n  }, [content]);\n\n  return (\n    <>\n      <div\n        data-cy=\"neeto-editor-content\"\n        ref={editorContentRef}\n        className={classnames(EDITOR_CONTENT_CLASSNAME, {\n          [className]: className,\n        })}\n        dangerouslySetInnerHTML={{\n          __html: sanitize(htmlContent, SANITIZE_OPTIONS),\n        }}\n        {...otherProps}\n      />\n      {imagePreviewDetails && (\n        <ImagePreview {...{ imagePreviewDetails, setImagePreviewDetails }} />\n      )}\n    </>\n  );\n};\n\nexport default memo(EditorContent);\n"],"names":["ImagePreview","_ref","imagePreviewDetails","setImagePreviewDetails","_useState","useState","_useState2","_slicedToArray","isLoading","setIsLoading","_useTranslation","useTranslation","t","imagePreviewRef","useRef","useOnClickOutside","enabled","useEffect","document","addEventListener","e","key","removeEventListener","createPortal","_jsxs","className","children","_jsx","Spinner","Button","icon","Close","style","onClick","classnames","alt","ref","src","onLoad","caption","body","EditorContent","_ref$content","content","_ref$variables","variables","otherProps","_objectWithoutProperties","_excluded","editorContentRef","htmlContent","substituteVariables","highlightCode","sanitize","DOMPurify","injectCopyButtonToCodeBlocks","_editorContentRef$cur","preTags","current","querySelectorAll","concat","EDITOR_CONTENT_CLASSNAME","forEach","preTag","button","createElement","root","createRoot","render","CopyToClipboardButton","size","value","textContent","appendChild","bindImageClickListener","_editorContentRef$cur2","figureTags","figureTag","image","querySelector","link","isNil","event","preventDefault","innerText","applyLineHighlighting","_Fragment","_objectSpread","_defineProperty","dangerouslySetInnerHTML","__html","SANITIZE_OPTIONS","memo"],"mappings":"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"}

package/dist/{chunk-e712f06d.js → chunk-98e9b1c3.js}

@@ -12516,10 +12516,13 @@ var SANITIZE_OPTIONS = {
   ADD_TAGS: ["iframe"],
   ADD_ATTR: ["target", "allow", "allowfullscreen", "frameborder"]
 };
-var CODE_BLOCK_REGEX = /<pre><code(?:\s+class="language-([^"]*)")?>([\S\s]*?)<\/code><\/pre>/gim;
+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"]);
 
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { 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, "&");
 };
@@ -12530,10 +12533,58 @@ var buildReactElementFromAST = function buildReactElementFromAST(element) {
   }
   return element.value;
 };
+var highlightLinesCode = function highlightLinesCode(code, options) {
+  code.innerHTML = code.innerHTML.replace(/([ \S]*\n|[ \S]*$)/gm, function (match) {
+    return "<div class=\"highlight-line\">".concat(match, "</div>");
+  });
+  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) {
+        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 highlightCode = function highlightCode(content) {
   lowlight.highlightAuto("");
   var highlightedAST = {};
   return content.replace(CODE_BLOCK_REGEX, function (_, language, code) {
+    var _match$;
+    var regex = /data-highlighted-lines="([^"]*)"/;
+    var match = content.match(regex);
     if (language && LANGUAGE_LIST.includes(language)) {
       highlightedAST = lowlight.highlight(language, transformCode(code));
     } else {
@@ -12543,7 +12594,25 @@ var highlightCode = function highlightCode(content) {
       }
     }
     var highlightedNode = highlightedAST.children.map(buildReactElementFromAST);
-    return "<pre><code>".concat(renderToString(highlightedNode), "</code></pre>");
+    return "<pre data-highlighted-lines=".concat((_match$ = match === null || match === void 0 ? void 0 : match[1]) !== null && _match$ !== void 0 ? _match$ : "", "><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) {
+    var highlightedLines = codeTag.closest("pre").getAttribute("data-highlighted-lines");
+    if (highlightedLines) {
+      var _highlightedLines$spl;
+      var linesToHighlight = (_highlightedLines$spl = highlightedLines.split(",")) === null || _highlightedLines$spl === void 0 ? void 0 : _highlightedLines$spl.map(Number);
+      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) {
@@ -12565,5 +12634,5 @@ var substituteVariables = function substituteVariables(highlightedContent, varia
   });
 };
 
-export { EDITOR_CONTENT_CLASSNAME as E, SANITIZE_OPTIONS as S, highlightCode as h, substituteVariables as s };
-//# sourceMappingURL=chunk-e712f06d.js.map
+export { EDITOR_CONTENT_CLASSNAME as E, SANITIZE_OPTIONS as S, applyLineHighlighting as a, highlightCode as h, substituteVariables as s };
+//# sourceMappingURL=chunk-98e9b1c3.js.map