rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: link editor on mobile [skip e2e]

Browse Source
This commit is contained in:
Aman Harwara
2023-10-24 20:22:22 +05:30
parent 80d9b0c31c
commit 8fd997ba19
3 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/javascripts/Components/SuperEditor/BlocksEditor.tsx
View File

@@ -27,6 +27,7 @@ import { MarkdownTransformers } from './MarkdownTransformers'
import { RemoveBrokenTablesPlugin } from './Plugins/TablePlugin' import { RemoveBrokenTablesPlugin } from './Plugins/TablePlugin'
import TableActionMenuPlugin from './Plugins/TableCellActionMenuPlugin' import TableActionMenuPlugin from './Plugins/TableCellActionMenuPlugin'
import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin' import ToolbarPlugin from './Plugins/ToolbarPlugin/ToolbarPlugin'
import { useMediaQuery, MutuallyExclusiveMediaQueryBreakpoints } from '@/Hooks/useMediaQuery'
type BlocksEditorProps = { type BlocksEditorProps = {
onChange?: (value: string, preview: string) => void onChange?: (value: string, preview: string) => void
@@ -72,9 +73,11 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
} }
} }
const isMobile = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
return ( return (
<> <>
<ToolbarPlugin /> {!isMobile && <ToolbarPlugin />}
<RichTextPlugin <RichTextPlugin
contentEditable={ contentEditable={
<div id="blocks-editor" className="editor-scroller h-full min-h-0"> <div id="blocks-editor" className="editor-scroller h-full min-h-0">
@@ -92,6 +95,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
placeholder={null} placeholder={null}
ErrorBoundary={LexicalErrorBoundary} ErrorBoundary={LexicalErrorBoundary}
/> />
{isMobile && <ToolbarPlugin />}
<ListPlugin /> <ListPlugin />
<MarkdownShortcutPlugin transformers={MarkdownTransformers} /> <MarkdownShortcutPlugin transformers={MarkdownTransformers} />
<TablePlugin hasCellMerge /> <TablePlugin hasCellMerge />

11
packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/FloatingLinkEditor.tsx
View File

@@ -143,11 +143,16 @@ const FloatingLinkEditor = ({
return ( return (
<Portal> <Portal>
<div <div
ref={linkEditorRef} id="super-link-editor"
className="absolute left-0 top-0 z-modal rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] md:opacity-0" className="absolute bottom-12 left-1/2 z-modal w-[calc(100%_-_1rem)] -translate-x-1/2 rounded-lg border border-border bg-contrast px-2 py-1 shadow-sm shadow-contrast translucent-ui:border-[--popover-border-color] translucent-ui:bg-[--popover-background-color] translucent-ui:[backdrop-filter:var(--popover-backdrop-filter)] md:bottom-0 md:left-0 md:w-auto md:translate-x-0 md:opacity-0"
> >
{isEditMode ? ( {isEditMode ? (
<div className="flex flex-col gap-2 py-1"> <div
className="flex flex-col gap-2 py-1"
onBlur={() => {
setEditMode(false)
}}
>
{isLinkText && ( {isLinkText && (
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
<Icon type="plain-text" className="flex-shrink-0" /> <Icon type="plain-text" className="flex-shrink-0" />

5
packages/web/src/javascripts/Components/SuperEditor/Plugins/ToolbarPlugin/ToolbarPlugin.tsx
View File

@@ -339,8 +339,11 @@ const ToolbarPlugin = () => {
const handleRootBlur = (event: FocusEvent) => { const handleRootBlur = (event: FocusEvent) => {
const elementToBeFocused = event.relatedTarget as Node const elementToBeFocused = event.relatedTarget as Node
const containerContainsElementToFocus = container?.contains(elementToBeFocused) const containerContainsElementToFocus = container?.contains(elementToBeFocused)
const linkEditorContainsElementToFocus = document
.getElementById('super-link-editor')
?.contains(elementToBeFocused)
const willFocusDismissButton = dismissButtonRef.current === elementToBeFocused const willFocusDismissButton = dismissButtonRef.current === elementToBeFocused
if (containerContainsElementToFocus && !willFocusDismissButton) { if ((containerContainsElementToFocus || linkEditorContainsElementToFocus) && !willFocusDismissButton) {
return return
} }
setIsFocusInEditor(false) setIsFocusInEditor(false)