AsyncMarkdownEditor and MarkdownWrapper should share styles #917

Author: joepio

browser/data-browser/src/chunks/MarkdownEditor/AsyncMarkdownEditor.tsx

@@ -14,6 +14,7 @@ import { ToggleButton } from './ToggleButton';
 import { SlashCommands, suggestion } from './SlashMenu/CommandsExtension';
 import { ExtendedImage } from './ImagePicker';
 import { transition } from '../../helpers/transition';
+import { markdownStyles } from '../../components/datatypes/Markdown';
 
 export type AsyncMarkdownEditorProps = {
   placeholder?: string;
@@ -110,7 +111,7 @@ export default function AsyncMarkdownEditor({
           />
         )}
         <EditorContent key='rich-editor' editor={editor}>
-          <FloatingMenu editor={editor ?? undefined}>
+          <FloatingMenu editor={editor}>
             <FloatingMenuText>Type &apos;/&apos; for options</FloatingMenuText>
           </FloatingMenu>
           <BubbleMenu />
@@ -137,6 +138,7 @@ const calcHeight = (value: string) => {
   return `calc(${lines * LINE_HEIGHT}em + 5px)`;
 };
 
+// WARNING: Only add styles specific to editing. For other styles, add to `MarkdownWrapper`
 const EditorWrapper = styled.div<{ hideEditor: boolean }>`
   position: relative;
   background-color: ${p => p.theme.colors.bg};
@@ -171,27 +173,7 @@ const EditorWrapper = styled.div<{ hideEditor: boolean }>`
       height: auto;
     }
 
-    pre {
-      padding: 0.75rem 1rem;
-      background-color: ${p => p.theme.colors.bg1};
-      border-radius: ${p => p.theme.radius};
-      font-family: monospace;
-
-      code {
-        white-space: pre;
-        color: inherit;
-        padding: 0;
-        background: none;
-        font-size: 0.8rem;
-      }
-    }
-
-    blockquote {
-      margin-inline-start: 0;
-      border-inline-start: 3px solid ${p => p.theme.colors.textLight2};
-      color: ${p => p.theme.colors.textLight};
-      padding-inline-start: 1rem;
-    }
+    ${markdownStyles}
   }
 `;
 

browser/data-browser/src/components/Card.tsx

@@ -42,6 +42,7 @@ export const CardRow = styled.div<CardRowProps>`
   display: block;
   border-top: ${p => (p.noBorder ? 'none' : 'var(--border)')};
   padding: ${p => p.theme.size(2)} ${p => p.theme.size()};
+  overflow-wrap: break-word;
 `;
 
 /** A block inside a Card which has full width */

browser/data-browser/src/components/SearchFilter.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { urls, useArray, useProperty, useResource } from '@tomic/react';
+import { core, urls, useArray, useProperty, useResource } from '@tomic/react';
 import { ResourceSelector } from '../components/forms/ResourceSelector';
 
 /**
@@ -18,7 +18,7 @@ export function ClassFilter({ filters, setFilters }): JSX.Element {
     // Set the filters to the default values of the properties
     setFilters({
       ...filters,
-      [urls.properties.isA]: klass,
+      [core.properties.isA]: klass,
     });
   }, [klass, JSON.stringify(filters)]);
 
@@ -27,7 +27,7 @@ export function ClassFilter({ filters, setFilters }): JSX.Element {
       <ResourceSelector
         setSubject={setClass}
         value={klass}
-        isA={urls.classes.class}
+        classType={core.classes.class}
       />
       {allProps?.map(propertySubject => (
         <PropertyFilter

browser/data-browser/src/components/datatypes/Markdown.tsx

@@ -1,5 +1,5 @@
 import ReactMarkdown from 'react-markdown';
-import { styled } from 'styled-components';
+import { css, styled } from 'styled-components';
 import remarkGFM from 'remark-gfm';
 import { Button } from '../Button';
 import { truncateMarkdown } from '../../helpers/markdown';
@@ -44,16 +44,11 @@ Markdown.defaultProps = {
   renderGFM: true,
 };
 
-const MarkdownWrapper = styled.div`
-  width: 100%;
-  overflow-x: hidden;
-  img {
-    max-width: 100%;
-  }
-
-  * {
+/** Styles shared in Markdown View & Edit renderers */
+export const markdownStyles = css`
+  /* * {
     white-space: unset;
-  }
+  } */
 
   p,
   h1,
@@ -69,6 +64,10 @@ const MarkdownWrapper = styled.div`
     margin-bottom: 0;
   }
 
+  ul li {
+    margin-bottom: 1rem;
+  }
+
   blockquote {
     margin-inline-start: 0rem;
     padding-inline-start: 1rem;
@@ -116,4 +115,14 @@ const MarkdownWrapper = styled.div`
   }
 `;
 
+const MarkdownWrapper = styled.div`
+  width: 100%;
+  overflow-x: hidden;
+  img {
+    max-width: 100%;
+  }
+
+  ${markdownStyles}
+`;
+
 export default Markdown;

browser/data-browser/src/hooks/useUpload.ts

@@ -1,6 +1,6 @@
 import {
   AtomicError,
-  properties,
+  dataBrowser,
   Resource,
   useArray,
   useStore,
@@ -24,7 +24,7 @@ export function useUpload(parentResource: Resource): UseUploadResult {
   const [error, setError] = useState<Error | undefined>(undefined);
   const [subResources, setSubResources] = useArray(
     parentResource,
-    properties.subResources,
+    dataBrowser.properties.subResources,
     opts,
   );
 
@@ -40,7 +40,7 @@ export function useUpload(parentResource: Resource): UseUploadResult {
         const allUploaded = [...netUploaded];
         setIsUploading(false);
         await setSubResources([...subResources, ...allUploaded]);
-        await parentResource.save(store);
+        await parentResource.save();
 
         return allUploaded;
       } catch (e) {

browser/data-browser/src/routes/NewResource/NewRoute.tsx

@@ -1,4 +1,4 @@
-import { useResource, urls } from '@tomic/react';
+import { useResource, core } from '@tomic/react';
 import { useCallback } from 'react';
 import { useNavigate } from 'react-router';
 
@@ -75,9 +75,8 @@ function NewResourceSelector() {
         </h1>
         <div>
           <ResourceSelector
-            hideCreateOption
             setSubject={handleClassSet}
-            isA={urls.classes.class}
+            classType={core.classes.class}
           />
         </div>
         <BaseButtons parent={calculatedParent} />

browser/data-browser/src/routes/SearchRoute.tsx

@@ -141,6 +141,7 @@ export function Search(): JSX.Element {
             <Column ref={resultsDiv} gap='1rem'>
               {results.map((subject, index) => (
                 <ResourceCard
+                  small
                   initialInView={index < 5}
                   subject={subject}
                   key={subject}

browser/data-browser/src/views/Card/CollectionCard.tsx

@@ -16,7 +16,7 @@ const MAX_COUNT = 5;
  * Renders a Resource and all its Properties in a random order. Title
  * (shortname) is rendered prominently at the top.
  */
-function CollectionCard({ resource, small }: CardViewProps): JSX.Element {
+function CollectionCard({ resource }: CardViewProps): JSX.Element {
   const [description] = useString(resource, core.properties.description);
   const [members] = useArray(resource, collections.properties.members);
   const [showAll, setShowMore] = useState(false);
@@ -32,38 +32,32 @@ function CollectionCard({ resource, small }: CardViewProps): JSX.Element {
     <Column gap='0.5rem'>
       <ResourceCardTitle resource={resource} />
       {description && <Markdown text={description} />}
-      <Show show={!small}>
-        {subjects.length === 0 ? (
-          <Empty>No resources</Empty>
-        ) : (
-          <CardInsideFull>
-            {subjects.map(member => {
-              return (
-                <CardRow key={member}>
-                  <ResourceInline subject={member} />
-                </CardRow>
-              );
-            })}
-            {tooMany && (
-              <CardRow>
-                <Button clean onClick={() => setShowMore(!showAll)}>
-                  {showAll
-                    ? 'show less'
-                    : `show ${members.length - MAX_COUNT} more`}
-                </Button>
+      {subjects.length === 0 ? (
+        <Empty>No resources</Empty>
+      ) : (
+        <CardInsideFull>
+          {subjects.map(member => {
+            return (
+              <CardRow key={member}>
+                <ResourceInline subject={member} />
               </CardRow>
-            )}
-          </CardInsideFull>
-        )}
-      </Show>
+            );
+          })}
+          {tooMany && (
+            <CardRow>
+              <Button clean onClick={() => setShowMore(!showAll)}>
+                {showAll
+                  ? 'show less'
+                  : `show ${members.length - MAX_COUNT} more`}
+              </Button>
+            </CardRow>
+          )}
+        </CardInsideFull>
+      )}
     </Column>
   );
 }
 
-const Show: FC<PropsWithChildren<{ show: boolean }>> = ({ show, children }) => {
-  return show ? children : null;
-};
-
 const Empty = styled.span`
   color: ${({ theme }) => theme.colors.textLight};
 `;

browser/data-browser/src/views/Card/ResourceCard.tsx

@@ -127,29 +127,30 @@ export function ResourceCardDefault({
       <ResourceCardTitle resource={resource}>
         <ClassName>{isAResource.title}</ClassName>
       </ResourceCardTitle>
-      <DescriptionWrapper>
+      <DescriptionWrapper
+        style={{
+          maxHeight: small ? '14rem' : 'auto',
+        }}
+      >
         <ValueForm
           resource={resource}
           propertyURL={core.properties.description}
         />
       </DescriptionWrapper>
-      {!small && (
-        <AllProps
-          basic
-          resource={resource}
-          except={defaultHiddenProps}
-          editable
-        />
-      )}
+      <AllProps
+        basic
+        resource={resource}
+        except={defaultHiddenProps}
+        editable
+      />
     </Column>
   );
 }
 
 export default ResourceCard;
 
 const DescriptionWrapper = styled.div`
-  max-height: 10rem;
-  overflow: hidden;
+  overflow: auto;
 `;
 
 const ClassName = styled.span`