feat: Full toolbar is now shown in Super notes on non-mobile screens instead of floating formatting toolbar. It can be focused or toggled using Ctrl/Cmd+Shift+K

packages/icons/src/Icons/index.ts

@@ -104,6 +104,7 @@ import HistoryLockedIllustration from './il-history-locked.svg'
 import IconsSpriteStylekit from './icons-sprite-stylekit.svg'
 import IlNotesIcon from './il-notes.svg'
 import ImageIcon from './ic-image.svg'
+import IndentIcon from './ic-indent.svg'
 import InfoIcon from './ic-info.svg'
 import ItalicIcon from './ic-italic.svg'
 import KeyboardCloseIcon from './ic-keyboard-close.svg'
@@ -137,6 +138,7 @@ import NoPreviewIllustration from './il-no-preview.svg'
 import NotesFilledIcon from './ic-notes-filled.svg'
 import NotesIcon from './ic-notes.svg'
 import OpenInIcon from './ic-open-in.svg'
+import OutdentIcon from './ic-outdent.svg'
 import PasswordIcon from './ic-textbox-password.svg'
 import PencilFilledIcon from './ic-pencil-filled.svg'
 import PencilIcon from './ic-pencil.svg'
@@ -188,8 +190,8 @@ import SubtractIcon from './ic-subtract.svg'
 import SuperscriptIcon from './ic-superscript.svg'
 import SyncIcon from './ic-sync.svg'
 import TasksIcon from './ic-tasks.svg'
-import TextIcon from './ic-text.svg'
 import TextCircleIcon from './ic-text-circle.svg'
+import TextIcon from './ic-text.svg'
 import TextParagraphLongIcon from './ic-text-paragraph-long.svg'
 import ThemesFilledIcon from './ic-themes-filled.svg'
 import ThemesIcon from './ic-themes.svg'
@@ -221,6 +223,7 @@ export {
   AddBoldIcon,
   AddIcon,
   AddTextIcon,
+  AegisIcon,
   ArchiveIcon,
   ArrowDownCheckmarkIcon,
   ArrowDownIcon,
@@ -274,6 +277,7 @@ export {
   EmailFilledIcon,
   EmailIcon,
   EnterIcon,
+  EvernoteIcon,
   EyeFilledIcon,
   EyeIcon,
   EyeOffFilledIcon,
@@ -304,6 +308,7 @@ export {
   FullscreenExitIcon,
   FullscreenIcon,
   GiftOutlineIcon,
+  GoogleKeepIcon,
   GroupIcon,
   HashtagFilledIcon,
   HashtagIcon,
@@ -316,6 +321,7 @@ export {
   IconsSpriteStylekit,
   IlNotesIcon,
   ImageIcon,
+  IndentIcon,
   InfoIcon,
   ItalicIcon,
   KeyboardCloseIcon,
@@ -349,6 +355,7 @@ export {
   NotesFilledIcon,
   NotesIcon,
   OpenInIcon,
+  OutdentIcon,
   PasswordIcon,
   PencilFilledIcon,
   PencilIcon,
@@ -364,6 +371,8 @@ export {
   ProtectedIllustration,
   RedoIcon,
   ReorderIcon,
+  ReplaceAllIcon,
+  ReplaceIcon,
   RestoreIcon,
   RichTextIcon,
   SafeIcon,
@@ -382,6 +391,7 @@ export {
   ShortcutButtonIcon,
   SignInIcon,
   SignOutIcon,
+  SimplenoteIcon,
   SNLogoAltIcon,
   SNLogoFull,
   SNLogoIcon,
@@ -397,8 +407,8 @@ export {
   SuperscriptIcon,
   SyncIcon,
   TasksIcon,
-  TextIcon,
   TextCircleIcon,
+  TextIcon,
   TextParagraphLongIcon,
   ThemesFilledIcon,
   ThemesIcon,
@@ -420,10 +430,4 @@ export {
   ViewIcon,
   WarningIcon,
   WindowIcon,
-  EvernoteIcon,
-  GoogleKeepIcon,
-  SimplenoteIcon,
-  AegisIcon,
-  ReplaceIcon,
-  ReplaceAllIcon,
 }

packages/ui-services/src/Keyboard/KeyboardCommands.ts

@@ -27,6 +27,7 @@ export const STAR_NOTE_COMMAND = createKeyboardCommand('STAR_NOTE_COMMAND')
 export const PIN_NOTE_COMMAND = createKeyboardCommand('PIN_NOTE_COMMAND')
 
 export const SUPER_TOGGLE_SEARCH = createKeyboardCommand('SUPER_TOGGLE_SEARCH')
+export const SUPER_TOGGLE_TOOLBAR = createKeyboardCommand('SUPER_TOGGLE_TOOLBAR')
 export const SUPER_SEARCH_TOGGLE_CASE_SENSITIVE = createKeyboardCommand('SUPER_SEARCH_TOGGLE_CASE_SENSITIVE')
 export const SUPER_SEARCH_TOGGLE_REPLACE_MODE = createKeyboardCommand('SUPER_SEARCH_TOGGLE_REPLACE_MODE')
 export const SUPER_SEARCH_NEXT_RESULT = createKeyboardCommand('SUPER_SEARCH_NEXT_RESULT')

packages/ui-services/src/Keyboard/getKeyboardShortcuts.ts

@@ -30,6 +30,7 @@ import {
   SUPER_SEARCH_PREVIOUS_RESULT,
   SUPER_SEARCH_TOGGLE_REPLACE_MODE,
   CHANGE_EDITOR_WIDTH_COMMAND,
+  SUPER_TOGGLE_TOOLBAR,
 } from './KeyboardCommands'
 import { KeyboardKey } from './KeyboardKey'
 import { KeyboardModifier } from './KeyboardModifier'
@@ -147,6 +148,11 @@ export function getKeyboardShortcuts(platform: Platform, _environment: Environme
       modifiers: [primaryModifier, KeyboardModifier.Shift],
       preventDefault: true,
     },
+    {
+      command: SUPER_TOGGLE_TOOLBAR,
+      key: 'k',
+      modifiers: [primaryModifier, KeyboardModifier.Shift],
+    },
     {
       command: SUPER_TOGGLE_SEARCH,
       key: 'f',

packages/web/src/javascripts/Components/Icon/IconNameToSvgMapping.tsx

@@ -42,8 +42,8 @@ export const IconNameToSvgMapping = {
   'fullscreen-exit': icons.FullscreenExitIcon,
   'hashtag-off': icons.HashtagOffIcon,
   'keyboard-close': icons.KeyboardCloseIcon,
-  'link-off': icons.LinkOffIcon,
   'line-width': icons.LineWidthIcon,
+  'link-off': icons.LinkOffIcon,
   'list-bulleted': icons.ListBulleted,
   'list-numbered': icons.ListNumbered,
   'lock-filled': icons.LockFilledIcon,
@@ -99,17 +99,19 @@ export const IconNameToSvgMapping = {
   hashtag: icons.HashtagIcon,
   help: icons.HelpIcon,
   history: icons.HistoryIcon,
+  image: icons.ImageIcon,
+  indent: icons.IndentIcon,
   info: icons.InfoIcon,
   italic: icons.ItalicIcon,
   keyboard: icons.KeyboardIcon,
   link: icons.LinkIcon,
   listed: icons.ListedIcon,
   lock: icons.LockIcon,
-  image: icons.ImageIcon,
   markdown: icons.MarkdownIcon,
   merge: icons.MergeIcon,
   more: icons.MoreIcon,
   notes: icons.NotesIcon,
+  outdent: icons.OutdentIcon,
   paragraph: icons.TextParagraphLongIcon,
   password: icons.PasswordIcon,
   pencil: icons.PencilIcon,

packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx

@@ -19,7 +19,6 @@ import AutoEmbedPlugin from './Plugins/AutoEmbedPlugin'
 import CollapsiblePlugin from './Plugins/CollapsiblePlugin'
 import DraggableBlockPlugin from './Plugins/DraggableBlockPlugin'
 import CodeHighlightPlugin from './Plugins/CodeHighlightPlugin'
-import FloatingTextFormatToolbarPlugin from './Plugins/ToolbarPlugins/FloatingTextFormatToolbarPlugin'
 import { TabIndentationPlugin } from './Plugins/TabIndentationPlugin'
 import { handleEditorChange } from './Utils'
 import { SuperEditorContentId } from './Constants'
@@ -110,7 +109,6 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
       <RemoveBrokenTablesPlugin />
       {!readonly && floatingAnchorElem && (
         <>
-          <FloatingTextFormatToolbarPlugin anchorElem={floatingAnchorElem} />
           <DraggableBlockPlugin anchorElem={floatingAnchorElem} />
           <TableActionMenuPlugin anchorElem={floatingAnchorElem} cellMerge />
         </>

packages/web/src/javascripts/Components/SuperEditor/Plugins/Blocks/IndentOutdent.tsx

@@ -4,13 +4,13 @@ export function GetIndentOutdentBlocks(editor: LexicalEditor) {
   return [
     {
       name: 'Indent',
-      iconName: 'arrow-right',
+      iconName: 'indent',
       keywords: ['indent'],
       onSelect: () => editor.dispatchCommand(INDENT_CONTENT_COMMAND, undefined),
     },
     {
       name: 'Outdent',
-      iconName: 'arrow-left',
+      iconName: 'outdent',
       keywords: ['outdent'],
       onSelect: () => editor.dispatchCommand(OUTDENT_CONTENT_COMMAND, undefined),
     },

packages/web/src/javascripts/Components/SuperEditor/Plugins/LinkEditor/LinkEditor.tsx → packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarLinkEditor.tsx

@@ -1,12 +1,11 @@
 import Icon from '@/Components/Icon/Icon'
-import { CloseIcon, CheckIcon, PencilFilledIcon, TrashFilledIcon } from '@standardnotes/icons'
 import { KeyboardKey } from '@standardnotes/ui-services'
-import { IconComponent } from '../../Lexical/Theme/IconComponent'
 import { sanitizeUrl } from '../../Lexical/Utils/sanitizeUrl'
 import { TOGGLE_LINK_COMMAND } from '@lexical/link'
 import { useCallback, useState, useRef, useEffect } from 'react'
 import { GridSelection, LexicalEditor, NodeSelection, RangeSelection } from 'lexical'
 import { classNames } from '@standardnotes/snjs'
+import StyledTooltip from '@/Components/StyledTooltip/StyledTooltip'
 
 type Props = {
   linkUrl: string
@@ -65,29 +64,27 @@ const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection, i
         }}
         className="flex-grow rounded-sm bg-contrast p-1 text-text sm:min-w-[40ch]"
       />
-      <button
-        className="flex rounded-lg p-3 hover:bg-contrast hover:text-text disabled:cursor-not-allowed"
-        onClick={() => {
-          setEditMode(false)
-          editor.focus()
-        }}
-        aria-label="Cancel editing link"
-        onMouseDown={(event) => event.preventDefault()}
-      >
-        <IconComponent size={15}>
-          <CloseIcon />
-        </IconComponent>
-      </button>
-      <button
-        className="flex rounded-lg p-3 hover:bg-contrast hover:text-text disabled:cursor-not-allowed"
-        onClick={handleLinkSubmission}
-        aria-label="Save link"
-        onMouseDown={(event) => event.preventDefault()}
-      >
-        <IconComponent size={15}>
-          <CheckIcon />
-        </IconComponent>
-      </button>
+      <StyledTooltip showOnMobile showOnHover label="Cancel editing">
+        <button
+          className="flex select-none items-center justify-center rounded p-2 enabled:hover:bg-default disabled:opacity-50 md:border md:border-transparent enabled:hover:md:translucent-ui:border-[--popover-border-color]"
+          onClick={() => {
+            setEditMode(false)
+            editor.focus()
+          }}
+          onMouseDown={(event) => event.preventDefault()}
+        >
+          <Icon type="close" size="medium" />
+        </button>
+      </StyledTooltip>
+      <StyledTooltip showOnMobile showOnHover label="Save link">
+        <button
+          className="flex select-none items-center justify-center rounded p-2 enabled:hover:bg-default disabled:opacity-50 md:border md:border-transparent enabled:hover:md:translucent-ui:border-[--popover-border-color]"
+          onClick={handleLinkSubmission}
+          onMouseDown={(event) => event.preventDefault()}
+        >
+          <Icon type="check" size="medium" />
+        </button>
+      </StyledTooltip>
     </div>
   ) : (
     <div className="flex items-center gap-1">
@@ -105,31 +102,29 @@ const LinkEditor = ({ linkUrl, isEditMode, setEditMode, editor, lastSelection, i
       </a>
       {!isAutoLink && (
         <>
-          <button
-            className="flex rounded-lg p-3 hover:bg-contrast hover:text-text disabled:cursor-not-allowed"
-            onClick={() => {
-              setEditedLinkUrl(linkUrl)
-              setEditMode(true)
-            }}
-            aria-label="Edit link"
-            onMouseDown={(event) => event.preventDefault()}
-          >
-            <IconComponent size={15}>
-              <PencilFilledIcon />
-            </IconComponent>
-          </button>
-          <button
-            className="flex rounded-lg p-3 hover:bg-contrast hover:text-text disabled:cursor-not-allowed"
-            onClick={() => {
-              editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-            }}
-            aria-label="Remove link"
-            onMouseDown={(event) => event.preventDefault()}
-          >
-            <IconComponent size={15}>
-              <TrashFilledIcon />
-            </IconComponent>
-          </button>
+          <StyledTooltip showOnMobile showOnHover label="Edit link">
+            <button
+              className="flex select-none items-center justify-center rounded p-2 enabled:hover:bg-default disabled:opacity-50 md:border md:border-transparent enabled:hover:md:translucent-ui:border-[--popover-border-color]"
+              onClick={() => {
+                setEditedLinkUrl(linkUrl)
+                setEditMode(true)
+              }}
+              onMouseDown={(event) => event.preventDefault()}
+            >
+              <Icon type="pencil-filled" size="medium" />
+            </button>
+          </StyledTooltip>
+          <StyledTooltip showOnMobile showOnHover label="Remove link">
+            <button
+              className="flex select-none items-center justify-center rounded p-2 enabled:hover:bg-default disabled:opacity-50 md:border md:border-transparent enabled:hover:md:translucent-ui:border-[--popover-border-color]"
+              onClick={() => {
+                editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
+              }}
+              onMouseDown={(event) => event.preventDefault()}
+            >
+              <Icon type="trash-filled" size="medium" />
+            </button>
+          </StyledTooltip>
         </>
       )}
     </div>