Fixed visibility toolbar active state

closes https://linear.app/tryghost/issue/PLG-108

Toolbar button was still showing active state after turning off "email only" if the segment had been changed whilst the email-only toggle was enabled.

- added `getIsContentVisibilityActive()` method to all of our decorator nodes
  - returns `false` if a node has no `visibility` property defined
  - returns `true` only when visibility is disabled for web or email
- updated `HtmlNodeComponent` to use the new property rather than a JSON stringified comparison of current/default visibility value

packages/kg-default-nodes/lib/generate-decorator-node.js

@@ -211,6 +211,21 @@ export function generateDecoratorNode({nodeType, properties = [], version = 1})
 
             return text ? `${text}\n\n` : '';
         }
+
+        /**
+         * Returns true/false for whether the node's visibility property
+         * is active or not. Always false if a node has no visibility property
+         * @returns {boolean}
+         */
+        getIsVisibilityActive() {
+            if (!properties.some(prop => prop.name === 'visibility')) {
+                return false;
+            }
+
+            const self = this.getLatest();
+            return self.__visibility.showOnEmail === false
+                || self.__visibility.showOnWeb === false;
+        }
     }
 
     /**

packages/kg-default-nodes/test/nodes/horizontalrule.test.js

@@ -111,4 +111,11 @@ describe('HorizontalNode', function () {
             node.getTextContent().should.equal('---\n\n');
         }));
     });
+
+    describe('getIsVisibilityActive', function () {
+        it('returns false (has no visibility property)', editorTest(function () {
+            const node = $createHorizontalRuleNode();
+            node.getIsVisibilityActive().should.be.false();
+        }));
+    });
 });

packages/kg-default-nodes/test/nodes/html.test.js

@@ -371,4 +371,24 @@ describe('HtmlNode', function () {
             node.getTextContent().should.equal('<script>const test = true;</script>\n\n');
         }));
     });
+
+    describe('getIsVisibilityActive', function () {
+        it('returns true when showOnEmail is false', editorTest(function () {
+            const node = $createHtmlNode();
+            node.visibility = {showOnEmail: false, showOnWeb: true, segment: 'status:-free'};
+            node.getIsVisibilityActive().should.be.true();
+        }));
+
+        it('returns true when showOnWeb is false', editorTest(function () {
+            const node = $createHtmlNode();
+            node.visibility = {showOnEmail: true, showOnWeb: false, segment: 'status:-free'};
+            node.getIsVisibilityActive().should.be.true();
+        }));
+
+        it('returns false when both showOnEmail and showOnWeb is true', editorTest(function () {
+            const node = $createHtmlNode();
+            node.visibility = {showOnEmail: true, showOnWeb: true, segment: 'status:-free'};
+            node.getIsVisibilityActive().should.be.false();
+        }));
+    });
 });

packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx

@@ -5,7 +5,6 @@ import {$getNodeByKey} from 'lexical';
 import {ActionToolbar} from '../components/ui/ActionToolbar.jsx';
 import {DESELECT_CARD_COMMAND, EDIT_CARD_COMMAND} from '../plugins/KoenigBehaviourPlugin.jsx';
 import {HtmlCard} from '../components/ui/cards/HtmlCard';
-import {HtmlNode} from './HtmlNode.jsx';
 import {SnippetActionToolbar} from '../components/ui/SnippetActionToolbar.jsx';
 import {ToolbarMenu, ToolbarMenuItem, ToolbarMenuSeparator} from '../components/ui/ToolbarMenu.jsx';
 import {VisibilityDropdown} from '../components/ui/VisibilityDropdown.jsx';
@@ -21,7 +20,9 @@ export function HtmlNodeComponent({nodeKey, html, visibility}) {
     const [showVisibilityDropdown, setShowVisibilityDropdown] = React.useState(false);
 
     const isContentVisibilityEnabled = cardConfig?.feature?.contentVisibility || false;
-    const isContentVisibilityActive = JSON.stringify(visibility) !== JSON.stringify(HtmlNode.getPropertyDefaults().visibility);
+    const isContentVisibilityActive = editor.getEditorState().read(() => {
+        return $getNodeByKey(nodeKey).getIsVisibilityActive();
+    });
 
     const [toggleEmail, toggleSegment, toggleWeb, segment, emailVisibility, webVisibility, dropdownOptions, message] = useVisibilityToggle(editor, nodeKey, visibility);