fix: super note improvements (#1991)

* fix: super note previews

* fix; checkmark size

* fix: top padding

* fix: prevent delete shortcut

* fix: spellcheck control

* fix: only embed file if uploaded to current note

* fix: ability to create new tag from editor autocomplete

* feat: protected file embed handling

* fix: event payload

packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResults.tsx

@@ -1,11 +1,12 @@
 import { LinkingController } from '@/Controllers/LinkingController'
-import { usePremiumModal } from '@/Hooks/usePremiumModal'
 import { observer } from 'mobx-react-lite'
 import { SNNote } from '@standardnotes/snjs'
 import Icon from '../Icon/Icon'
 import { PremiumFeatureIconName } from '../Icon/PremiumFeatureIcon'
 import LinkedItemMeta from './LinkedItemMeta'
 import { LinkableItem } from '@/Utils/Items/Search/LinkableItem'
+import { LinkedItemSearchResultsAddTagOption } from './LinkedItemSearchResultsAddTagOption'
+import { useCallback } from 'react'
 
 type Props = {
   createAndAddNewTag: LinkingController['createAndAddNewTag']
@@ -26,7 +27,13 @@ const LinkedItemSearchResults = ({
   onClickCallback,
   isEntitledToNoteLinking,
 }: Props) => {
-  const premiumModal = usePremiumModal()
+  const onClickAddNew = useCallback(
+    (searchQuery: string) => {
+      void createAndAddNewTag(searchQuery)
+      onClickCallback?.()
+    },
+    [createAndAddNewTag, onClickCallback],
+  )
 
   return (
     <div className="my-1">
@@ -37,12 +44,8 @@ const LinkedItemSearchResults = ({
             key={result.uuid}
             className="flex w-full items-center justify-between gap-4 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
             onClick={() => {
-              if (cannotLinkItem) {
-                premiumModal.activate('Note linking')
-              } else {
-                void linkItemToSelectedItem(result)
-                onClickCallback?.()
-              }
+              void linkItemToSelectedItem(result)
+              onClickCallback?.()
             }}
           >
             <LinkedItemMeta item={result} searchQuery={searchQuery} />
@@ -51,19 +54,7 @@ const LinkedItemSearchResults = ({
         )
       })}
       {shouldShowCreateTag && (
-        <button
-          className="group flex w-full items-center gap-2 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground focus:bg-info-backdrop"
-          onClick={() => {
-            void createAndAddNewTag(searchQuery)
-            onClickCallback?.()
-          }}
-        >
-          <span className="flex-shrink-0 align-middle">Create &amp; add tag</span>{' '}
-          <span className="inline-flex min-w-0 items-center gap-1 rounded bg-contrast py-1 pl-1 pr-2 align-middle text-xs text-text group-hover:bg-info group-hover:text-info-contrast">
-            <Icon type="hashtag" className="flex-shrink-0 text-info group-hover:text-info-contrast" size="small" />
-            <span className="min-w-0 overflow-hidden text-ellipsis">{searchQuery}</span>
-          </span>
-        </button>
+        <LinkedItemSearchResultsAddTagOption searchQuery={searchQuery} onClickCallback={onClickAddNew} />
       )}
     </div>
   )

packages/web/src/javascripts/Components/LinkedItems/LinkedItemSearchResultsAddTagOption.tsx

@@ -0,0 +1,42 @@
+import { classNames } from '@/Utils/ConcatenateClassNames'
+import Icon from '../Icon/Icon'
+
+type Props = {
+  searchQuery: string
+  onClickCallback: (searchQuery: string) => void
+  isFocused?: boolean
+}
+
+export const LinkedItemSearchResultsAddTagOption = ({ searchQuery, onClickCallback, isFocused }: Props) => {
+  return (
+    <button
+      className={classNames(
+        'group flex w-full items-center gap-2 overflow-hidden py-2 px-3 hover:bg-contrast hover:text-foreground',
+        'focus:bg-info-backdrop',
+        isFocused ? 'bg-contrast bg-info-backdrop text-foreground' : '',
+      )}
+      onClick={() => {
+        onClickCallback(searchQuery)
+      }}
+    >
+      <span className="flex-shrink-0 align-middle text-sm lg:text-xs">Create &amp; add tag</span>{' '}
+      <span
+        className={classNames(
+          'inline-flex min-w-0 items-center gap-1 rounded py-1 pl-1 pr-2 align-middle text-xs ',
+          'group-hover:bg-info group-hover:text-info-contrast',
+          isFocused ? 'bg-info text-info-contrast' : 'bg-contrast text-text',
+        )}
+      >
+        <Icon
+          type="hashtag"
+          className={classNames(
+            'flex-shrink-0 group-hover:text-info-contrast',
+            isFocused ? 'text-info-contrast' : 'text-info',
+          )}
+          size="small"
+        />
+        <span className="min-w-0 overflow-hidden text-ellipsis">{searchQuery}</span>
+      </span>
+    </button>
+  )
+}