Updates TipTap to v2.6.6. (#1218)

* Updated TipTap to v2.6.6 * Removed the optimizations introduced to the CodeBlock and Image component.
bigbinary · Sep 17, 2024 · 72900a3 · 72900a3
1 parent 947e666
commit 72900a3
Show file tree

Hide file tree

Showing 5 changed files with 275 additions and 441 deletions.
diff --git a/package.json b/package.json
@@ -77,30 +77,30 @@
     "@tanstack/react-query": "5.40.0",
     "@tanstack/react-query-devtools": "5.40.0",
     "@tippyjs/react": "4.2.6",
-    "@tiptap/extension-bubble-menu": "2.5.9",
-    "@tiptap/extension-character-count": "2.5.9",
-    "@tiptap/extension-code": "2.5.9",
-    "@tiptap/extension-code-block-lowlight": "2.5.9",
+    "@tiptap/extension-bubble-menu": "2.6.6",
+    "@tiptap/extension-character-count": "2.6.6",
+    "@tiptap/extension-code": "2.6.6",
+    "@tiptap/extension-code-block-lowlight": "2.6.6",
     "@tiptap/extension-collaboration": "^2.6.5",
     "@tiptap/extension-collaboration-cursor": "^2.6.5",
-    "@tiptap/extension-color": "2.5.9",
-    "@tiptap/extension-document": "2.5.9",
-    "@tiptap/extension-focus": "2.5.9",
-    "@tiptap/extension-highlight": "2.5.9",
-    "@tiptap/extension-image": "2.5.9",
-    "@tiptap/extension-link": "2.5.9",
-    "@tiptap/extension-mention": "2.5.9",
-    "@tiptap/extension-placeholder": "2.5.9",
-    "@tiptap/extension-table": "2.5.9",
-    "@tiptap/extension-table-cell": "2.5.9",
-    "@tiptap/extension-table-header": "2.5.9",
-    "@tiptap/extension-table-row": "2.5.9",
-    "@tiptap/extension-text-style": "2.5.9",
-    "@tiptap/extension-underline": "2.5.9",
-    "@tiptap/pm": "2.5.9",
-    "@tiptap/react": "2.5.9",
-    "@tiptap/starter-kit": "2.5.9",
-    "@tiptap/suggestion": "2.5.9",
+    "@tiptap/extension-color": "2.6.6",
+    "@tiptap/extension-document": "2.6.6",
+    "@tiptap/extension-focus": "2.6.6",
+    "@tiptap/extension-highlight": "2.6.6",
+    "@tiptap/extension-image": "2.6.6",
+    "@tiptap/extension-link": "2.6.6",
+    "@tiptap/extension-mention": "2.6.6",
+    "@tiptap/extension-placeholder": "2.6.6",
+    "@tiptap/extension-table": "2.6.6",
+    "@tiptap/extension-table-cell": "2.6.6",
+    "@tiptap/extension-table-header": "2.6.6",
+    "@tiptap/extension-table-row": "2.6.6",
+    "@tiptap/extension-text-style": "2.6.6",
+    "@tiptap/extension-underline": "2.6.6",
+    "@tiptap/pm": "2.6.6",
+    "@tiptap/react": "2.6.6",
+    "@tiptap/starter-kit": "2.6.6",
+    "@tiptap/suggestion": "2.6.6",
     "@wojtekmaj/react-timerange-picker": "5.5.0",
     "antd": "5.10.2",
     "autoprefixer": "10.4.16",

diff --git a/src/components/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.jsx b/src/components/Editor/CustomExtensions/CodeBlock/CodeBlockComponent.jsx
@@ -1,19 +1,16 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
 import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";
-import { noop } from "neetocist";
 import { Down } from "neetoicons";
 import CopyToClipboardButton from "neetomolecules/CopyToClipboardButton";
 import { Dropdown, Input } from "neetoui";
 import { useTranslation } from "react-i18next";
 
 import { SORTED_LANGUAGE_LIST } from "./constants";
-import { handleCodeBlockVisibility } from "./utils";
 
 const { Menu, MenuItem } = Dropdown;
 
-const CodeBlockComponent = ({ node, editor, updateAttributes, extension }) => {
-  const [isVisible, setIsVisible] = useState(true);
+const CodeBlockComponent = ({ node, editor, updateAttributes }) => {
   const [keyword, setKeyword] = useState("");
 
   const ref = useRef();
@@ -30,29 +27,6 @@ const CodeBlockComponent = ({ node, editor, updateAttributes, extension }) => {
     editor?.commands?.focus();
   };
 
-  useEffect(() => {
-    const container = ref.current;
-    const shouldSetObserver =
-      extension.options?.enableReactNodeViewOptimization;
-    if (!shouldSetObserver) return noop;
-
-    const observer = new IntersectionObserver(
-      entries => {
-        handleCodeBlockVisibility({ entries, setIsVisible });
-      },
-      {
-        rootMargin: "-10% 0% -10% 0%",
-        root: document.getElementById("neeto-editor-wrapper"),
-      }
-    );
-
-    if (container) setTimeout(() => observer.observe(container), 0);
-
-    return () => {
-      if (container && shouldSetObserver) observer.unobserve(container);
-    };
-  }, []);
-
   const handleContentMount = node => {
     if (ref.current && node?.offsetHeight) {
       ref.current.style.minHeight = `${node.offsetHeight}px`;
@@ -62,53 +36,51 @@ const CodeBlockComponent = ({ node, editor, updateAttributes, extension }) => {
   return (
     <NodeViewWrapper data-cy="neeto-editor-code-block">
       <div {...{ ref }}>
-        {isVisible && (
-          <pre ref={handleContentMount}>
-            <div
-              className="neeto-editor-codeblock-options"
-              contentEditable={false}
+        <pre ref={handleContentMount}>
+          <div
+            className="neeto-editor-codeblock-options"
+            contentEditable={false}
+          >
+            <Dropdown
+              appendTo={() => document.body}
+              buttonSize="small"
+              buttonStyle="secondary"
+              icon={Down}
+              label={node.attrs?.language || t("neetoEditor.common.auto")}
+              strategy="fixed"
+              zIndex={99999}
             >
-              <Dropdown
-                appendTo={() => document.body}
-                buttonSize="small"
-                buttonStyle="secondary"
-                icon={Down}
-                label={node.attrs?.language || t("neetoEditor.common.auto")}
-                strategy="fixed"
-                zIndex={99999}
-              >
-                <Input
-                  autoFocus
-                  className="neeto-editor-codeblock-options__input"
-                  placeholder={t("neetoEditor.placeholders.searchLanguages")}
-                  size="small"
-                  value={keyword}
-                  onChange={e => setKeyword(e.target.value)}
-                  onClick={e => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                  }}
-                />
-                <Menu className="neeto-editor-codeblock-options__menu">
-                  {filteredAndSortedLanguageList.map(language => (
-                    <MenuItem.Button
-                      key={language}
-                      onClick={() => handleLanguageSelect(language)}
-                    >
-                      {language || t("neetoEditor.common.auto")}
-                    </MenuItem.Button>
-                  ))}
-                </Menu>
-              </Dropdown>
-              <CopyToClipboardButton
+              <Input
+                autoFocus
+                className="neeto-editor-codeblock-options__input"
+                placeholder={t("neetoEditor.placeholders.searchLanguages")}
                 size="small"
-                style="secondary"
-                value={node?.content?.content[0]?.text}
+                value={keyword}
+                onChange={e => setKeyword(e.target.value)}
+                onClick={e => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }}
               />
-            </div>
-            <NodeViewContent as="code" />
-          </pre>
-        )}
+              <Menu className="neeto-editor-codeblock-options__menu">
+                {filteredAndSortedLanguageList.map(language => (
+                  <MenuItem.Button
+                    key={language}
+                    onClick={() => handleLanguageSelect(language)}
+                  >
+                    {language || t("neetoEditor.common.auto")}
+                  </MenuItem.Button>
+                ))}
+              </Menu>
+            </Dropdown>
+            <CopyToClipboardButton
+              size="small"
+              style="secondary"
+              value={node?.content?.content[0]?.text}
+            />
+          </div>
+          <NodeViewContent as="code" />
+        </pre>
       </div>
     </NodeViewWrapper>
   );

diff --git a/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js b/src/components/Editor/CustomExtensions/Image/ExtensionConfig.js
@@ -10,7 +10,6 @@ import { DIRECT_UPLOAD_ENDPOINT } from "src/common/constants";
 import DirectUpload from "utils/DirectUpload";
 
 import ImageComponent from "./ImageComponent";
-import { LazyLoadImage } from "./LazyLoadImage";
 
 const upload = async (file, url) => {
   if (file.size <= globalProps.endUserUploadedFileSizeLimitInMb * 1024 * 1024) {
@@ -131,23 +130,6 @@ export default Node.create({
   },
 
   addNodeView() {
-    if (this.options.enableReactNodeViewOptimization) {
-      return ({ editor, node, getPos }) => {
-        const view = new LazyLoadImage({
-          editor,
-          node,
-          getPos,
-          extension: this,
-        });
-
-        return {
-          dom: view.dom,
-          update: view.update.bind(view),
-          destroy: view.destroy.bind(view),
-        };
-      };
-    }
-
     return ReactNodeViewRenderer(ImageComponent);
   },
 

diff --git a/src/components/Editor/CustomExtensions/Image/LazyLoadImage.js b/src/components/Editor/CustomExtensions/Image/LazyLoadImage.js