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/blocks-editor/src/Editor/BlocksEditor.tsx

@@ -18,7 +18,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 {EditorState, LexicalEditor} from 'lexical';
+import {$getRoot, EditorState, LexicalEditor} from 'lexical';
 import HorizontalRulePlugin from '../Lexical/Plugins/HorizontalRulePlugin';
 import TwitterPlugin from '../Lexical/Plugins/TwitterPlugin';
 import YouTubePlugin from '../Lexical/Plugins/YouTubePlugin';
@@ -28,24 +28,42 @@ import DraggableBlockPlugin from '../Lexical/Plugins/DraggableBlockPlugin';
 import CodeHighlightPlugin from '../Lexical/Plugins/CodeHighlightPlugin';
 import FloatingTextFormatToolbarPlugin from '../Lexical/Plugins/FloatingTextFormatToolbarPlugin';
 import FloatingLinkEditorPlugin from '../Lexical/Plugins/FloatingLinkEditorPlugin';
+import {truncateString} from './Utils';
+import {SuperEditorContentId} from './Constants';
 
 const BlockDragEnabled = false;
 
 type BlocksEditorProps = {
-  onChange: (value: string) => void;
+  onChange: (value: string, preview: string) => void;
   className?: string;
   children: React.ReactNode;
+  previewLength: number;
+  spellcheck?: boolean;
 };
 
 export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
   onChange,
   className,
   children,
+  previewLength,
+  spellcheck,
 }) => {
   const handleChange = useCallback(
     (editorState: EditorState, _editor: LexicalEditor) => {
-      const stringifiedEditorState = JSON.stringify(editorState.toJSON());
-      onChange(stringifiedEditorState);
+      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';
+          }
+        });
+        previewText = truncateString(previewText, previewLength);
+
+        const stringifiedEditorState = JSON.stringify(editorState.toJSON());
+        onChange(stringifiedEditorState, previewText);
+      });
     },
     [onChange],
   );
@@ -67,7 +85,9 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
           <div id="blocks-editor" className="editor-scroller">
             <div className="editor" ref={onRef}>
               <ContentEditable
+                id={SuperEditorContentId}
                 className={`ContentEditable__root ${className}`}
+                spellCheck={spellcheck}
               />
             </div>
           </div>
@@ -85,7 +105,7 @@ export const BlocksEditor: FunctionComponent<BlocksEditorProps> = ({
         ]}
       />
       <TablePlugin />
-      <OnChangePlugin onChange={handleChange} />
+      <OnChangePlugin onChange={handleChange} ignoreSelectionChange={true} />
       <HistoryPlugin />
       <HorizontalRulePlugin />
       <AutoFocusPlugin />

packages/blocks-editor/src/Editor/Constants.ts

@@ -0,0 +1 @@
+export const SuperEditorContentId = 'super-editor-content';

packages/blocks-editor/src/Editor/Utils.ts

@@ -0,0 +1,7 @@
+export function truncateString(string: string, limit: number) {
+  if (string.length <= limit) {
+    return string;
+  } else {
+    return string.substring(0, limit) + '...';
+  }
+}

packages/blocks-editor/src/Lexical/Theme/base.scss

@@ -6,8 +6,6 @@
  *
  */
 
-@import 'https://fonts.googleapis.com/css?family=Reenie+Beanie';
-
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

packages/blocks-editor/src/Lexical/Theme/editor.scss

@@ -352,22 +352,22 @@
   border-radius: 2px;
 }
 .Lexical__listItemChecked:before {
-  border: 1px solid rgb(61, 135, 245);
+  border: 1px solid var(--sn-stylekit-info-color);
   border-radius: 2px;
-  background-color: #3d87f5;
+  background-color: var(--sn-stylekit-info-color);
   background-repeat: no-repeat;
 }
 .Lexical__listItemChecked:after {
   content: '';
   cursor: pointer;
-  border-color: #fff;
+  border-color: var(--sn-stylekit-info-contrast-color);
   border-style: solid;
   position: absolute;
   display: block;
-  top: 6px;
-  width: 3px;
-  left: 7px;
-  height: 6px;
+  top: 7px;
+  width: 5px;
+  left: 6px;
+  height: 10px;
   transform: rotate(45deg);
   border-width: 0 2px 2px 0;
 }

packages/blocks-editor/src/index.ts

@@ -1,2 +1,3 @@
 export * from './Editor/BlocksEditor';
 export * from './Editor/BlocksEditorComposer';
+export * from './Editor/Constants';