Document fixes and Note component #741

Author: Polleps

browser/data-browser/src/chunks/RTE/BubbleMenu.tsx

@@ -34,20 +34,28 @@ export function BubbleMenu({
   const editor = useTipTapEditor();
   const [linkMenuOpen, setLinkMenuOpen] = useState(false);
 
-  const { isBold, isItalic, isStrikethrough, isBlockquote, isCode, isLink } =
-    useEditorState({
-      editor,
-      selector: snapshot => ({
-        isBold: snapshot.editor.isActive('bold'),
-        isItalic: snapshot.editor.isActive('italic'),
-        isStrikethrough: snapshot.editor.isActive('strike'),
-        isBlockquote: snapshot.editor.isActive('blockquote'),
-        isCode: snapshot.editor.isActive('code'),
-        isLink: snapshot.editor.isActive('link'),
-      }),
-    });
+  const {
+    isBold,
+    isItalic,
+    isStrikethrough,
+    isBlockquote,
+    isCode,
+    isLink,
+    isInitialized,
+  } = useEditorState({
+    editor,
+    selector: snapshot => ({
+      isBold: snapshot.editor.isActive('bold'),
+      isItalic: snapshot.editor.isActive('italic'),
+      isStrikethrough: snapshot.editor.isActive('strike'),
+      isBlockquote: snapshot.editor.isActive('blockquote'),
+      isCode: snapshot.editor.isActive('code'),
+      isLink: snapshot.editor.isActive('link'),
+      isInitialized: snapshot.editor.isInitialized,
+    }),
+  });
 
-  if (!editor.isInitialized) {
+  if (!isInitialized) {
     return <></>;
   }
 

browser/data-browser/src/chunks/RTE/CollaborativeEditor.tsx

@@ -46,13 +46,17 @@ import {
   ResourceNodeInline,
 } from './ResourceExtension/ResourceNode';
 import { IsInRTEContex } from '@hooks/useIsInRTE';
-import { FaGripVertical, FaLink, FaTable } from 'react-icons/fa6';
+import { FaCircleInfo, FaGripVertical, FaLink, FaTable } from 'react-icons/fa6';
 import { useUpload } from '@hooks/useUpload';
 import FileHandler from '@tiptap/extension-file-handler';
 import { supportedImageTypes } from '@views/File/fileTypeUtils';
 import type { SuggestionItem } from './types';
 import { useNewResourceUI } from '@components/forms/NewForm/useNewResourceUI';
 import { addIf } from '@helpers/addIf';
+import toast from 'react-hot-toast';
+import { Row } from '@components/Row';
+import { Button } from '@components/Button';
+import { Note } from './NoteExtention/NoteExtention';
 
 export type CollaborativeEditorProps = {
   placeholder?: string;
@@ -107,6 +111,7 @@ export default function CollaborativeEditor({
           undoRedo: false,
           link: false,
         }),
+        Note,
         Typography,
         Link.extend({
           parseHTML: () => [
@@ -155,6 +160,19 @@ export default function CollaborativeEditor({
         }),
         SlashCommands.configure({
           suggestion: buildSuggestion(document.body, [
+            {
+              title: 'Note',
+              id: 'note',
+              icon: FaCircleInfo,
+              command: ({ range, editor: internalEditor }) => {
+                internalEditor
+                  .chain()
+                  .focus()
+                  .deleteRange(range)
+                  .toggleNote()
+                  .run();
+              },
+            },
             {
               title: 'Resource',
               id: 'resource',
@@ -244,6 +262,7 @@ export default function CollaborativeEditor({
         }),
       ],
       editable: canWrite,
+      enableContentCheck: true,
       onBlur,
       editorProps: {
         attributes: {
@@ -254,6 +273,30 @@ export default function CollaborativeEditor({
           spellcheck: 'true',
         },
       },
+      onContentError({ editor: currentEditor, error, disableCollaboration }) {
+        // Removes the collaboration extension.
+        disableCollaboration();
+
+        // Since the content is invalid, we don't want to emit an update
+        // Preventing synchronization with other editors or to a server
+        const emitUpdate = false;
+
+        // Disable the editor to prevent further user input
+        currentEditor.setEditable(false, emitUpdate);
+
+        console.error(error);
+        // Maybe show a notification to the user that they need to refresh the app
+        toast.error(
+          <Row wrapItems>
+            There was an error in the editor, please refresh the page to
+            continue.{' '}
+            <Button subtle onClick={() => window.location.reload()}>
+              Refresh
+            </Button>
+          </Row>,
+          { duration: Infinity },
+        );
+      },
     },
     [canWrite, drive],
   );

browser/data-browser/src/chunks/RTE/ColorMenu.tsx

@@ -34,9 +34,16 @@ export const ColorMenu: React.FC = () => {
     editor,
     selector: snapshot => {
       return {
-        selectedTextColor: snapshot.editor.getAttributes('textStyle').color,
+        selectedTextColor:
+          (snapshot.editor.getAttributes('textStyle').color as
+            | string
+            | undefined
+            | null) || undefined,
         selectedBackgroundColor:
-          snapshot.editor.getAttributes('textStyle').backgroundColor,
+          (snapshot.editor.getAttributes('textStyle').backgroundColor as
+            | string
+            | undefined
+            | null) || undefined,
       };
     },
   });
@@ -51,7 +58,13 @@ export const ColorMenu: React.FC = () => {
       defaultBackgroundColors,
     );
 
-  const setTextColor = (color: string) => {
+  const setTextColor = (color: string | undefined) => {
+    if (color === undefined) {
+      editor.chain().focus().unsetColor().run();
+
+      return;
+    }
+
     editor.chain().setColor(color).run();
     setLastUsedTextColors(prev => [
       color,
@@ -61,7 +74,13 @@ export const ColorMenu: React.FC = () => {
     ]);
   };
 
-  const setBackgroundColor = (color: string) => {
+  const setBackgroundColor = (color: string | undefined) => {
+    if (color === undefined) {
+      editor.chain().focus().unsetBackgroundColor().run();
+
+      return;
+    }
+
     editor.chain().setBackgroundColor(color).run();
     setLastUsedBackgroundColor(prev => [
       color,
@@ -144,7 +163,10 @@ export const ColorMenu: React.FC = () => {
   );
 };
 
-const useColor = (initialColor: string, onSelect: (color: string) => void) => {
+const useColor = (
+  initialColor: string | undefined,
+  onSelect: (color: string | undefined) => void,
+) => {
   const [isChanging, setIsChanging] = useState(false);
   const colorRef = useRef(initialColor);
 
@@ -203,14 +225,14 @@ const ColorButton = styled.button<{ color: string }>`
 
 interface ColorInputProps {
   label: string;
-  value: string;
+  value: string | undefined;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   onBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
 }
 
 const ColorInput: React.FC<ColorInputProps> = ({
   label,
-  value,
+  value = '#ffffff',
   onChange,
   onBlur,
 }) => {
@@ -221,7 +243,7 @@ const ColorInput: React.FC<ColorInputProps> = ({
       </div>
       <HiddenColorInput
         type='color'
-        value={value ?? '#ffffff'}
+        value={value}
         onChange={onChange}
         onBlur={onBlur}
       />
@@ -239,8 +261,8 @@ const HiddenColorInput = styled.input`
   width: 1px;
 `;
 
-const ColorInputLabel = styled.label<{ color: string }>`
-  --CIL_foreground: ${p => readableColor(p.color ?? p.theme.colors.bg)};
+const ColorInputLabel = styled.label<{ color: string | undefined }>`
+  --CIL_foreground: ${p => readableColor(p.color || p.theme.colors.bg)};
   cursor: pointer;
   position: relative;
   gap: 0.5rem;

browser/data-browser/src/chunks/RTE/ImagePicker.tsx

@@ -51,7 +51,7 @@ const MarkdownEditorImage = ({
   const [urlValue, setUrlValue] = useState<string>();
   const [selectedSubject, setSelectedSubject] = useState<string>();
   const [altText, setAltText] = useState<string>();
-
+  const [imageError, setImageError] = useState<boolean>(false);
   const [urlValid, urlRef] = useHTMLFormFieldValidation();
 
   const canSave = () => {
@@ -80,6 +80,14 @@ const MarkdownEditorImage = ({
       }
     : undefined;
 
+  if (imageError) {
+    return (
+      <NodeViewWrapper>
+        <ImageError selected={selected}>Failed to load image.</ImageError>
+      </NodeViewWrapper>
+    );
+  }
+
   if (node.attrs.src) {
     return (
       <NodeViewWrapper>
@@ -88,6 +96,7 @@ const MarkdownEditorImage = ({
           src={node.attrs.src}
           alt=''
           selected={selected}
+          onError={() => setImageError(true)}
         />
       </NodeViewWrapper>
     );
@@ -202,3 +211,23 @@ const StyledInputWrapper = styled(InputWrapper)`
     border-color: ${p => p.theme.colors.alert} !important;
   }
 `;
+
+const ImageError = styled.div<SelectableProps>`
+  background-color: ${p => p.theme.colors.bg1};
+  padding: ${p => p.theme.size()};
+  border-radius: ${p => p.theme.radius};
+  color: ${p => p.theme.colors.textLight};
+  width: 50%;
+  aspect-ratio: 1/1;
+  display: grid;
+  place-items: center;
+  font-size: 1.5rem;
+  font-weight: 500;
+  ${transition('box-shadow', 'filter')}
+
+  .tiptap:focus-within & {
+    box-shadow: 0 0 0 2px
+      ${p => (p.selected ? p.theme.colors.main : 'transparent')};
+    filter: ${p => (p.selected ? 'brightness(0.9)' : 'none')};
+  }
+`;

browser/data-browser/src/chunks/RTE/NoteExtention/NoteComponent.tsx

@@ -0,0 +1,34 @@
+import { Row } from '@components/Row';
+import { NodeViewContent, NodeViewWrapper } from '@tiptap/react';
+import { FaCircleInfo } from 'react-icons/fa6';
+import { styled } from 'styled-components';
+
+export const NoteComponent = () => {
+  return (
+    <StyledNodeViewWrapper>
+      <Title center contentEditable={false} gap='1ch'>
+        <FaCircleInfo />
+        Note
+      </Title>
+      <NodeViewContent />
+    </StyledNodeViewWrapper>
+  );
+};
+
+const StyledNodeViewWrapper = styled(NodeViewWrapper)`
+  background-color: ${p => p.theme.colors.mainSelectedBg};
+  padding: 1rem;
+  border-left: 3px solid ${p => p.theme.colors.main};
+  width: 100%;
+  margin-bottom: ${p => p.theme.size()};
+  & p:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const Title = styled(Row)`
+  font-weight: 600;
+  font-size: 1.1rem;
+  color: ${p => p.theme.colors.mainSelectedFg};
+  margin-bottom: ${p => p.theme.size(2)};
+`;

browser/data-browser/src/chunks/RTE/NoteExtention/NoteExtention.ts

@@ -0,0 +1,43 @@
+import { mergeAttributes, Node } from '@tiptap/core';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import { NoteComponent } from './NoteComponent';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    note: {
+      toggleNote: () => ReturnType;
+    };
+  }
+}
+
+export const Note = Node.create({
+  name: 'note-block',
+  group: 'block',
+  content: 'block*',
+  defining: true,
+  renderHTML({ HTMLAttributes }) {
+    return ['note-block', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'note-block',
+      },
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(NoteComponent);
+  },
+
+  addCommands() {
+    return {
+      toggleNote:
+        () =>
+        ({ commands }) => {
+          return commands.wrapIn(this.type.name);
+        },
+    };
+  },
+});

browser/data-browser/src/chunks/RTE/ResourceExtension/ResourceComponent.tsx

@@ -24,7 +24,10 @@ export const ResourceComponent = (
   return (
     <RTENodeViewWrapper wide={wide} key={props.node.attrs.subject}>
       <ErrorBoundary>
-        <Component subject={props.node.attrs.subject} />
+        <Component
+          subject={props.node.attrs.subject}
+          highlight={props.selected}
+        />
       </ErrorBoundary>
     </RTENodeViewWrapper>
   );