fix(YfmNote): fix yfm-note tooltip view and active state (#1031)

Author: d3m1d0v

demo/tests/visual-tests/__snapshots__/Note.visual.test.tsx-snapshots/Note-specific-should-update-styles-independently-for-nested-and-parent-notes-nested-note-is-alert-dark-chromium-linux.png

@@ -1,18 +1,22 @@
 .g-md-yfm-note-toolbar {
-    margin: 2px 8px;
+    margin: var(--g-spacing-half);
 }
 
 .g-md-toolbar-group__s-button_id_ {
     &note-type-tip {
-        color: var(--yfm-color-note-tip);
+        --g-button-text-color: var(--yfm-color-note-tip);
+        --g-button-text-color-hover: var(--yfm-color-note-tip);
     }
     &note-type-info {
-        color: var(--yfm-color-note-info);
+        --g-button-text-color: var(--yfm-color-note-info);
+        --g-button-text-color-hover: var(--yfm-color-note-info);
     }
     &note-type-alert {
-        color: var(--yfm-color-note-important);
+        --g-button-text-color: var(--yfm-color-note-important);
+        --g-button-text-color-hover: var(--yfm-color-note-important);
     }
     &note-type-warning {
-        color: var(--yfm-color-note-warning);
+        --g-button-text-color: var(--yfm-color-note-warning);
+        --g-button-text-color-hover: var(--yfm-color-note-warning);
     }
 }

demo/tests/visual-tests/__snapshots__/Note.visual.test.tsx-snapshots/Note-specific-should-update-styles-independently-for-nested-and-parent-notes-nested-note-is-alert-light-chromium-linux.png

@@ -9,8 +9,11 @@ import type {EditorView} from '#pm/view';
 import {i18n} from 'src/i18n/yfm-note';
 import {typedMemo} from 'src/react-utils/memo';
 import {Toolbar, type ToolbarData, ToolbarDataType} from 'src/toolbar';
+import {ToolbarWrapToContext} from 'src/toolbar/ToolbarRerender';
 import {removeNode} from 'src/utils/remove-node';
 
+import {NoteAttrs} from '../../const';
+
 import './YfmNoteToolbar.scss';
 
 const ToolbarMemoized = typedMemo(Toolbar);
@@ -23,7 +26,6 @@ enum YfmNoteType {
 }
 
 const isEnable = () => true;
-const isActive = () => false;
 
 const changeType: (
     type: YfmNoteType,
@@ -38,8 +40,8 @@ const changeType: (
         dispatch(
             tr.setNodeMarkup(pos, null, {
                 ...node.attrs,
-                class: `yfm-note yfm-accent-${type}`,
-                'note-type': type,
+                [NoteAttrs.Class]: `yfm-note yfm-accent-${type}`,
+                [NoteAttrs.Type]: type,
             }),
         );
     };
@@ -66,7 +68,7 @@ export function YfmNoteToolbar({pos, node, editorView}: YfmNoteToolbarProps) {
                     icon: {data: CircleInfo},
                     title: i18n(type),
                     type: ToolbarDataType.SingleButton,
-                    isActive,
+                    isActive: () => nodeRef.current.attrs[NoteAttrs.Type] === type,
                     isEnable,
                     exec: (view) =>
                         changeType(type)({
@@ -83,7 +85,8 @@ export function YfmNoteToolbar({pos, node, editorView}: YfmNoteToolbarProps) {
                     icon: {data: TrashBin},
                     title: i18n('remove'),
                     type: ToolbarDataType.SingleButton,
-                    isActive,
+                    theme: 'danger',
+                    isActive: () => false,
                     isEnable,
                     exec: (view) =>
                         removeNode({
@@ -98,14 +101,16 @@ export function YfmNoteToolbar({pos, node, editorView}: YfmNoteToolbarProps) {
     }, [nodeRef, posRef]);
 
     return (
-        <ToolbarMemoized
-            editor={editorView}
-            focus={onFocus}
-            // the yfm class allows to access css variables
-            // https://github.com/diplodoc-platform/transform/blob/master/src/scss/_common.scss#L17
-            className="yfm g-md-yfm-note-toolbar"
-            qa="g-md-toolbar-yfm-note"
-            data={toolbarData}
-        />
+        <ToolbarWrapToContext editor={editorView}>
+            <ToolbarMemoized
+                editor={editorView}
+                focus={onFocus}
+                // the yfm class allows to access css variables
+                // https://github.com/diplodoc-platform/transform/blob/master/src/scss/_common.scss#L17
+                className="yfm g-md-yfm-note-toolbar"
+                qa="g-md-toolbar-yfm-note"
+                data={toolbarData}
+            />
+        </ToolbarWrapToContext>
     );
 }