@truedat/core 8.11.4 → 8.11.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/core",
-  "version": "8.11.4",
+  "version": "8.11.5",
   "description": "Truedat Web Core",
   "sideEffects": [
     "**/*.css",
@@ -64,12 +64,12 @@
   },
   "dependencies": {
     "@apollo/client": "^3.13.8",
-    "@tiptap/core": "^3.20.0",
-    "@tiptap/extension-heading": "^3.20.0",
-    "@tiptap/extension-link": "^3.20.0",
-    "@tiptap/pm": "^3.20.0",
-    "@tiptap/react": "^3.20.0",
-    "@tiptap/starter-kit": "^3.20.0",
+    "@tiptap/core": "3.31.3",
+    "@tiptap/extension-heading": "3.31.3",
+    "@tiptap/extension-link": "3.31.3",
+    "@tiptap/pm": "3.31.3",
+    "@tiptap/react": "3.31.3",
+    "@tiptap/starter-kit": "3.31.3",
     "@xyflow/react": "^12.6.4",
     "axios": "^1.15.0",
     "dompurify": "^3.4.11",
@@ -98,5 +98,5 @@
     "swr": "^2.3.3",
     "turndown": "^7.2.2"
   },
-  "gitHead": "a80d09c5a9a8f88a4f20dce8a1c79a6db0d281c4"
+  "gitHead": "d7c5a489590a23c1b5722dafbd2e2d5902303ed9"
 }

package/src/components/Markdown.js

@@ -1,7 +1,7 @@
 import { useRef, useEffect, useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import { useIntl } from "react-intl";
-import { useEditor, EditorContent } from "@tiptap/react";
+import { useEditor, useEditorState, EditorContent } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import Heading from "@tiptap/extension-heading";
@@ -151,7 +151,7 @@ export function MarkdownEditor({
   const { formatMessage } = useIntl();
   const [linkModalOpen, setLinkModalOpen] = useState(false);
   const [linkUrl, setLinkUrl] = useState("");
-  const [hasSelection, setHasSelection] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
   const lastEmittedMarkdownRef = useRef(value);
   const editorRef = useRef(null);
   const initialContent = markdownToHtml(value);
@@ -161,6 +161,8 @@ export function MarkdownEditor({
     content: initialContent,
     editable: !disabled,
     immediatelyRender: false,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
     editorProps: {
       handlePaste(view, event) {
         const editorInstance = editorRef.current;
@@ -216,18 +218,23 @@ export function MarkdownEditor({
     editor.setEditable(!disabled);
   }, [disabled, editor]);
 
-  useEffect(() => {
-    if (!editor) return;
-    const updateSelection = () => {
-      const { from, to } = editor.state.selection;
-      setHasSelection(from !== to);
-    };
-    updateSelection();
-    editor.on("selectionUpdate", updateSelection);
-    return () => {
-      editor.off("selectionUpdate", updateSelection);
-    };
-  }, [editor]);
+  const toolbarState = useEditorState({
+    editor,
+    selector: ({ editor: ed }) => {
+      if (!ed) return null;
+      return {
+        bold: ed.isActive("bold"),
+        italic: ed.isActive("italic"),
+        underline: ed.isActive("underline"),
+        heading2: ed.isActive("heading", { level: 2 }),
+        heading3: ed.isActive("heading", { level: 3 }),
+        bulletList: ed.isActive("bulletList"),
+        orderedList: ed.isActive("orderedList"),
+        link: ed.isActive("link"),
+        hasSelection: !ed.state.selection.empty,
+      };
+    },
+  });
 
   const openLinkModal = useCallback(
     (url = null) => {
@@ -279,7 +286,7 @@ export function MarkdownEditor({
     [editor],
   );
 
-  if (!editor) {
+  if (!editor || !toolbarState) {
     return null;
   }
 
@@ -292,7 +299,7 @@ export function MarkdownEditor({
       ) : null}
       <Menu size="small" attached="top" className="markdown-editor-toolbar">
         <Menu.Item
-          active={editor.isActive("bold")}
+          active={isFocused && toolbarState.bold}
           onMouseDown={(e) => {
             e.preventDefault();
             editor.chain().focus().toggleBold().run();
@@ -301,7 +308,7 @@ export function MarkdownEditor({
           <Icon name="bold" />
         </Menu.Item>
         <Menu.Item
-          active={editor.isActive("italic")}
+          active={isFocused && toolbarState.italic}
           onMouseDown={(e) => {
             e.preventDefault();
             editor.chain().focus().toggleItalic().run();
@@ -310,7 +317,7 @@ export function MarkdownEditor({
           <Icon name="italic" />
         </Menu.Item>
         <Menu.Item
-          active={editor.isActive("underline")}
+          active={isFocused && toolbarState.underline}
           onMouseDown={(e) => {
             e.preventDefault();
             editor.chain().focus().toggleUnderline().run();
@@ -319,6 +326,7 @@ export function MarkdownEditor({
           <Icon name="underline" />
         </Menu.Item>
         <Menu.Item
+          active={isFocused && toolbarState.heading2}
           onMouseDown={(e) => {
             e.preventDefault();
             editor.chain().focus().toggleHeading({ level: 2 }).run();
@@ -327,6 +335,7 @@ export function MarkdownEditor({
           <Icon name="heading" size="large" />
         </Menu.Item>
         <Menu.Item
+          active={isFocused && toolbarState.heading3}
           onMouseDown={(e) => {
             e.preventDefault();
             editor.chain().focus().toggleHeading({ level: 3 }).run();
@@ -335,7 +344,7 @@ export function MarkdownEditor({
           <Icon name="heading" size="small" />
         </Menu.Item>
         <Menu.Item
-          active={editor.isActive("bulletList")}
+          active={isFocused && toolbarState.bulletList}
           onMouseDown={(e) => {
             e.preventDefault();
             editor.chain().focus().toggleBulletList().run();
@@ -344,7 +353,7 @@ export function MarkdownEditor({
           <Icon name="list ul" />
         </Menu.Item>
         <Menu.Item
-          active={editor.isActive("orderedList")}
+          active={isFocused && toolbarState.orderedList}
           onMouseDown={(e) => {
             e.preventDefault();
             editor.chain().focus().toggleOrderedList().run();
@@ -353,11 +362,11 @@ export function MarkdownEditor({
           <Icon name="list ol" />
         </Menu.Item>
         <Menu.Item
-          active={editor.isActive("link")}
-          disabled={!hasSelection && !editor.isActive("link")}
+          active={isFocused && toolbarState.link}
+          disabled={!toolbarState.hasSelection && !toolbarState.link}
           onMouseDown={(e) => {
             e.preventDefault();
-            if (hasSelection || editor.isActive("link")) {
+            if (toolbarState.hasSelection || toolbarState.link) {
               openLinkModal();
             }
           }}
@@ -374,7 +383,7 @@ export function MarkdownEditor({
         onAccept={handleLinkAccept}
         validate={validateLinkUrl}
         initialValue={linkUrl}
-        allowEmpty={editor.isActive("link")}
+        allowEmpty={toolbarState.link}
         header={
           <>
             <Icon name="linkify" />

package/src/components/__tests__/Markdown.spec.js

@@ -1,4 +1,4 @@
-import { waitFor } from "@testing-library/react";
+import { act, fireEvent, waitFor } from "@testing-library/react";
 import { render } from "@truedat/test/render";
 import {
   MarkdownReader,
@@ -165,6 +165,60 @@ describe("<MarkdownReader />", () => {
 });
 
 describe("<MarkdownEditor />", () => {
+  it.each([
+    ["bold", 0],
+    ["italic", 1],
+    ["underline", 2],
+    ["heading 2", 3],
+    ["heading 3", 4],
+    ["bullet list", 5],
+    ["ordered list", 6],
+  ])("updates %s highlighting without typing", async (_, index) => {
+    const { container } = render(<MarkdownEditor value="Hello" />);
+    await waitFor(() =>
+      expect(container.querySelector(".tiptap")).toBeInTheDocument(),
+    );
+    const button = container.querySelectorAll(".markdown-editor-toolbar .item")[
+      index
+    ];
+    expect(button).not.toHaveClass("active");
+    fireEvent.focus(container.querySelector(".tiptap"));
+    fireEvent.mouseDown(button);
+    expect(button).toHaveClass("active");
+    fireEvent.mouseDown(button);
+    expect(button).not.toHaveClass("active");
+  });
+
+  it("updates highlighting when the cursor moves between formatted and plain text", async () => {
+    const { container } = render(<MarkdownEditor value="**Bold** plain" />);
+    await waitFor(() =>
+      expect(container.querySelector(".tiptap")).toBeInTheDocument(),
+    );
+    const editor = container.querySelector(".tiptap").editor;
+    const bold = container.querySelector(".markdown-editor-toolbar .item");
+    fireEvent.focus(container.querySelector(".tiptap"));
+    act(() => editor.commands.setTextSelection(2));
+    expect(bold).toHaveClass("active");
+    act(() => editor.commands.setTextSelection(8));
+    expect(bold).not.toHaveClass("active");
+  });
+
+  it("only highlights initial formatting while the editor is focused", async () => {
+    const { container } = render(<MarkdownEditor value="**Bold** text" />);
+    await waitFor(() =>
+      expect(container.querySelector(".tiptap")).toBeInTheDocument(),
+    );
+    const editable = container.querySelector(".tiptap");
+    const bold = container.querySelector(".markdown-editor-toolbar .item");
+    expect(bold).not.toHaveClass("active");
+    fireEvent.focus(editable);
+    expect(bold).toHaveClass("active");
+    fireEvent.blur(editable);
+    expect(bold).not.toHaveClass("active");
+    fireEvent.focus(editable);
+    expect(bold).toHaveClass("active");
+  });
+
   it("matches the latest snapshot when editor is ready", async () => {
     const rendered = render(<MarkdownEditor />);
     await waitFor(() => {

package/src/components/__tests__/__snapshots__/Markdown.spec.js.snap

@@ -114,7 +114,7 @@ exports[`<MarkdownEditor /> matches the latest snapshot with label and value 1`]
       class="ui small top attached markdown-editor-toolbar menu"
     >
       <div
-        class="active item"
+        class="item"
       >
         <i
           aria-hidden="true"