From cf4e34858fcb898199ed102194d2d068c7d1d2db Mon Sep 17 00:00:00 2001 From: Aman Harwara Date: Wed, 1 Feb 2023 21:25:12 +0530 Subject: [PATCH] fix: Fixed issue where converting to Super would result in empty note --- .../blocks-editor/src/Editor/BlocksEditor.tsx | 26 ++-------------- packages/blocks-editor/src/Editor/Utils.ts | 30 +++++++++++++++++++ .../Plugins/ImportPlugin/ImportPlugin.tsx | 20 ++++++++++++- .../NoteView/SuperEditor/SuperEditor.tsx | 4 +-- .../SuperEditor/SuperNoteImporter.tsx | 2 +- 5 files changed, 55 insertions(+), 27 deletions(-) diff --git a/packages/blocks-editor/src/Editor/BlocksEditor.tsx b/packages/blocks-editor/src/Editor/BlocksEditor.tsx index 9ad407bd9..cebf8c017 100644 --- a/packages/blocks-editor/src/Editor/BlocksEditor.tsx +++ b/packages/blocks-editor/src/Editor/BlocksEditor.tsx @@ -11,7 +11,7 @@ import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin' import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin' import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin' import { ListPlugin } from '@lexical/react/LexicalListPlugin' -import { $getRoot, EditorState, LexicalEditor } from 'lexical' +import { EditorState, LexicalEditor } from 'lexical' import HorizontalRulePlugin from '../Lexical/Plugins/HorizontalRulePlugin' import TwitterPlugin from '../Lexical/Plugins/TwitterPlugin' import YouTubePlugin from '../Lexical/Plugins/YouTubePlugin' @@ -22,7 +22,7 @@ import CodeHighlightPlugin from '../Lexical/Plugins/CodeHighlightPlugin' import FloatingTextFormatToolbarPlugin from '../Lexical/Plugins/FloatingTextFormatToolbarPlugin' import FloatingLinkEditorPlugin from '../Lexical/Plugins/FloatingLinkEditorPlugin' import { TabIndentationPlugin } from '../Lexical/Plugins/TabIndentationPlugin' -import { truncateString } from './Utils' +import { handleEditorChange } from './Utils' import { SuperEditorContentId } from './Constants' import { classNames } from '@standardnotes/utils' import { MarkdownTransformers } from './MarkdownTransformers' @@ -55,27 +55,7 @@ export const BlocksEditor: FunctionComponent = ({ } editorState.read(() => { - const childrenNodes = $getRoot().getAllTextNodes().slice(0, 2) - let previewText = '' - childrenNodes.forEach((node, index) => { - previewText += node.getTextContent() - if (index !== childrenNodes.length - 1) { - previewText += '\n' - } - }) - - if (previewLength) { - previewText = truncateString(previewText, previewLength) - } - - try { - const stringifiedEditorState = JSON.stringify(editorState.toJSON()) - onChange?.(stringifiedEditorState, previewText) - } catch (error) { - window.alert( - `An invalid change was made inside the Super editor. Your change was not saved. Please report this error to the team: ${error}`, - ) - } + handleEditorChange(editorState, previewLength, onChange) }) }, // Ignoring 'ignoreFirstChange' and 'previewLength' diff --git a/packages/blocks-editor/src/Editor/Utils.ts b/packages/blocks-editor/src/Editor/Utils.ts index 6101a2247..368a18c03 100644 --- a/packages/blocks-editor/src/Editor/Utils.ts +++ b/packages/blocks-editor/src/Editor/Utils.ts @@ -1,3 +1,5 @@ +import { $getRoot, EditorState } from 'lexical' + export function truncateString(string: string, limit: number) { if (string.length <= limit) { return string @@ -5,3 +7,31 @@ export function truncateString(string: string, limit: number) { return string.substring(0, limit) + '...' } } + +export function handleEditorChange( + editorState: EditorState, + previewLength?: number, + onChange?: (value: string, previewText: string) => void, +) { + const childrenNodes = $getRoot().getAllTextNodes().slice(0, 2) + let previewText = '' + childrenNodes.forEach((node, index) => { + previewText += node.getTextContent() + if (index !== childrenNodes.length - 1) { + previewText += '\n' + } + }) + + if (previewLength) { + previewText = truncateString(previewText, previewLength) + } + + try { + const stringifiedEditorState = JSON.stringify(editorState.toJSON()) + onChange?.(stringifiedEditorState, previewText) + } catch (error) { + window.alert( + `An invalid change was made inside the Super editor. Your change was not saved. Please report this error to the team: ${error}`, + ) + } +} diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx index f91b0b093..c3a2b393c 100644 --- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx +++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx @@ -3,9 +3,19 @@ import { useEffect } from 'react' import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown' import { $generateNodesFromDOM } from '@lexical/html' import { $createParagraphNode, $createRangeSelection } from 'lexical' +import { handleEditorChange } from '@standardnotes/blocks-editor/src/Editor/Utils' +import { SuperNotePreviewCharLimit } from '../../SuperEditor' /** Note that markdown conversion does not insert new lines. See: https://github.com/facebook/lexical/issues/2815 */ -export default function ImportPlugin({ text, format }: { text: string; format: 'md' | 'html' }): JSX.Element | null { +export default function ImportPlugin({ + text, + format, + onChange, +}: { + text: string + format: 'md' | 'html' + onChange: (value: string, preview: string) => void +}): JSX.Element | null { const [editor] = useLexicalComposerContext() useEffect(() => { @@ -28,5 +38,13 @@ export default function ImportPlugin({ text, format }: { text: string; format: ' }) }, [editor, text, format]) + useEffect(() => { + return editor.registerUpdateListener(({ editorState }) => { + editorState.read(() => { + handleEditorChange(editorState, SuperNotePreviewCharLimit, onChange) + }) + }) + }, [editor, onChange]) + return null } diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx index 0539a91bd..24628fc40 100644 --- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx +++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperEditor.tsx @@ -44,7 +44,7 @@ import ModalOverlay from '@/Components/Modal/ModalOverlay' import MobileToolbarPlugin from './Plugins/MobileToolbarPlugin/MobileToolbarPlugin' import { SuperEditorNodes } from './SuperEditorNodes' -const NotePreviewCharLimit = 160 +export const SuperNotePreviewCharLimit = 160 type Props = { application: WebApplication @@ -182,7 +182,7 @@ export const SuperEditor: FunctionComponent = ({ lineHeight && `leading-${lineHeight.toLowerCase()}`, fontSize ? getPlaintextFontSize(fontSize) : 'text-base', )} - previewLength={NotePreviewCharLimit} + previewLength={SuperNotePreviewCharLimit} spellcheck={spellcheck} > diff --git a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx index e66590875..f0c35eca5 100644 --- a/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx +++ b/packages/web/src/javascripts/Components/NoteView/SuperEditor/SuperNoteImporter.tsx @@ -122,7 +122,7 @@ export const SuperNoteImporter: FunctionComponent = ({ note, application, previewLength={NotePreviewCharLimit} spellcheck={note.spellcheck} > - +