Updated @ placeholder copy and styles (#1271)

REF MOM-220
TryGhost · Jun 12, 2024 · 511a0a7 · 511a0a7
1 parent 96a6a9a
commit 511a0a7
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/packages/kg-default-nodes/lib/nodes/at-link/AtLinkSearchNode.js b/packages/kg-default-nodes/lib/nodes/at-link/AtLinkSearchNode.js
@@ -6,7 +6,7 @@ import {$applyNodeReplacement, TextNode} from 'lexical';
 export class AtLinkSearchNode extends TextNode {
     __placeholder = null;
 
-    defaultPlaceholder = 'Search for a link';
+    defaultPlaceholder = 'Type to search';
 
     static getType() {
         return 'at-link-search';

diff --git a/packages/kg-default-nodes/test/nodes/at-link-search.test.js b/packages/kg-default-nodes/test/nodes/at-link-search.test.js
@@ -82,7 +82,7 @@ describe('AtLinkSearchNode', function () {
         const dom = atLinkNode.createDOM(config);
         dom.classList.contains('multiple').should.be.true;
         dom.classList.contains('classes').should.be.true;
-        dom.dataset.placeholder.should.equal('Search for a link');
+        dom.dataset.placeholder.should.equal('Type to search');
     }));
 
     it('renders without default placeholder if text is present', editorTest(function () {
@@ -106,7 +106,7 @@ describe('AtLinkSearchNode', function () {
     it('updates to remove default placeholder when text is added', editorTest(function () {
         const atLinkNode = $createAtLinkSearchNode();
         const dom = atLinkNode.createDOM(config);
-        dom.dataset.placeholder.should.equal('Search for a link');
+        dom.dataset.placeholder.should.equal('Type to search');
 
         const prevNode = AtLinkSearchNode.clone(atLinkNode);
 

diff --git a/packages/koenig-lexical/src/themes/default.js b/packages/koenig-lexical/src/themes/default.js
@@ -31,7 +31,7 @@ const defaultTheme = {
     },
     code: undefined,
     tkHighlighted: 'bg-lime-500 dark:bg-lime-800 py-1',
-    atLink: 'inline-block bg-grey-200/70 dark:bg-grey-900',
+    atLink: 'inline-block bg-grey-200/70 mx-[-.2rem] px-1 pb-[.2rem] leading-[1.4] rounded dark:bg-grey-900',
     atLinkSearch: 'after:content-[attr(data-placeholder)] after:text-grey-500 dark:after:text-grey-600 min-w-[5px]'
 };
 

diff --git a/packages/koenig-lexical/test/e2e/internal-linking.test.js b/packages/koenig-lexical/test/e2e/internal-linking.test.js
@@ -198,7 +198,7 @@ test.describe('Internal linking', async () => {
                     <span>
                         <span data-lexical-text="true">‌</span>
                         <span
-                            data-placeholder="Search for a link"
+                            data-placeholder="Type to search"
                             data-lexical-text="true"
                         ></span>
                     </span>