Add custom theme styles and use them in GlobalStyle

apps/extension/src/Components/Editor/index.tsx

@@ -15,7 +15,7 @@ import { useDebouncedCallback } from 'use-debounce'
 import React, { useState, useEffect, useMemo, useRef } from 'react'
 import styled from 'styled-components'
 
-import { useEditorChange } from '@mexit/shared'
+import { EditorStyles, useEditorChange } from '@mexit/shared'
 import generatePlugins from '../../Utils/plugins'
 import { useAuthStore } from '../../Hooks/useAuth'
 import { EditorWrapper } from './styled'
@@ -170,20 +170,22 @@ export const Editor: React.FC<EditorProps> = ({ readOnly, onChange }) => {
 
   return (
     <EditorWrapper style={springProps} onClick={() => setPreviewMode(false)} onBlur={() => setPreviewMode(true)}>
-      <MexEditor
-        comboboxConfig={comboboxConfig}
-        meta={{
-          path: node.path
-        }}
-        // debug
-        components={components}
-        BalloonMarkToolbarButtons={<BallonMarkToolbarButtons />}
-        onChange={debounced}
-        options={editorOptions}
-        editorId={node.nodeid}
-        value={nodeContent}
-        portalElement={document.getElementById('mexit').shadowRoot.getElementById('sputlit-main')}
-      />
+      <EditorStyles>
+        <MexEditor
+          comboboxConfig={comboboxConfig}
+          meta={{
+            path: node.path
+          }}
+          // debug
+          components={components}
+          BalloonMarkToolbarButtons={<BallonMarkToolbarButtons />}
+          onChange={debounced}
+          options={editorOptions}
+          editorId={node.nodeid}
+          value={nodeContent}
+          portalElement={document.getElementById('mexit').shadowRoot.getElementById('sputlit-main')}
+        />
+      </EditorStyles>
     </EditorWrapper>
   )
 }

apps/extension/src/Components/Editor/styled.tsx

@@ -1,7 +1,6 @@
 import styled, { css } from 'styled-components'
 import { Scroll } from '../Results/styled'
 import { animated } from 'react-spring'
-import { EditorStyles } from '@mexit/shared'
 
 export const EditorWrapper = styled(animated.div)`
   display: flex;
@@ -13,5 +12,4 @@ export const EditorWrapper = styled(animated.div)`
   color: ${({ theme }) => theme.colors.text.fade};
   border-radius: 10px;
   ${Scroll}
-  ${EditorStyles}
 `

apps/webapp/src/Components/Editor/Editor.tsx

@@ -22,13 +22,11 @@ import Todo from '../Todo'
 import { useEditorChange } from '@mexit/shared'
 import { EditorStyles } from '@mexit/shared'
 
-const EditorWrapper = styled.div`
+const EditorWrapper = styled(EditorStyles)`
   flex: 1;
   max-width: 800px;
   margin: 1rem;
   padding: 1rem;
-
-  ${EditorStyles}
 `
 
 interface EditorProps {

apps/webapp/src/Components/EditorPreviewRenderer.tsx

@@ -1,4 +1,11 @@
-import { ComboboxConfig, ComboboxKey, MexEditor, useDataStore } from '@workduck-io/mex-editor'
+import {
+  ComboboxConfig,
+  ComboboxKey,
+  ELEMENT_ILINK,
+  ELEMENT_TAG,
+  MexEditor,
+  useDataStore
+} from '@workduck-io/mex-editor'
 import React, { useEffect } from 'react'
 import styled from 'styled-components'
 import { useBlockHighlightStore, useFocusBlock } from '../Stores/useFocusBlock'
@@ -20,12 +27,10 @@ interface EditorPreviewRendererProps {
   onDoubleClick?: (ev: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
-const PreviewStyles = styled.div<{ noMouseEvents: boolean }>`
+const PreviewStyles = styled(EditorStyles)<{ noMouseEvents: boolean }>`
   ${({ noMouseEvents }) => noMouseEvents && 'pointer-events: none;'};
   user-select: none;
   font-size: 14px;
-
-  ${EditorStyles}
 `
 /* ${TodoContainer}, button, input, textarea, select, option {
     pointer-events: none;
@@ -50,12 +55,15 @@ const EditorPreviewRenderer = ({
       keys: {
         ilink: {
           // @ts-ignore
+          slateElementType: ELEMENT_ILINK,
           newItemHandler: (ilink: string, parentId?: string) => addILink(ilink, null, parentId)
         },
         tag: {
+          slateElementType: ELEMENT_TAG,
           newItemHandler: (tag: string) => addTag(tag)
         },
         slash_command: {
+          slateElementType: 'slash_command',
           newItemHandler: () => undefined
         }
       },

apps/webapp/src/Components/Sidebar/Nav.tsx

@@ -144,9 +144,11 @@ const Nav = ({ links }: NavProps) => {
                 content={l.shortcut ? <TooltipTitleWithShortcut title={l.title} shortcut={l.shortcut} /> : l.title}
               >
                 <Link tabIndex={-1} className={(s) => (s.isActive ? 'active' : '')} to={l.path} key={`nav_${l.title}`}>
-                  {l.icon !== undefined ? l.icon : l.title}
-                  <NavTitle>{l.title}</NavTitle>
-                  {l.count > 0 && <Count>{l.count}</Count>}
+                  <>
+                    {l.icon !== undefined ? l.icon : l.title}
+                    <NavTitle>{l.title}</NavTitle>
+                    {l.count > 0 && <Count>{l.count}</Count>}
+                  </>
                 </Link>
               </NavTooltip>
             )
@@ -206,9 +208,11 @@ const Nav = ({ links }: NavProps) => {
               to={ROUTE_PATHS.archive}
               key="nav_search"
             >
-              {GetIcon(archiveFill)}
-              <NavTitle>Archive</NavTitle>
-              {archiveCount > 0 && <Count>{archiveCount}</Count>}
+              <>
+                {GetIcon(archiveFill)}
+                <NavTitle>Archive</NavTitle>
+                {archiveCount > 0 && <Count>{archiveCount}</Count>}
+              </>
             </Link>
           </NavTooltip>
           {/*
@@ -229,13 +233,15 @@ const Nav = ({ links }: NavProps) => {
               to={`${ROUTE_PATHS.settings}/themes`}
               key="nav_settings"
             >
-              {GetIcon(settings4Line)}
-              <NavTitle>Settings</NavTitle>
+              <>
+                {GetIcon(settings4Line)}
+                <NavTitle>Settings</NavTitle>
+              </>
             </Link>
           </NavTooltip>
         </EndLinkContainer>
       </NavWrapper>
-      <TrafficLightBG />
+      {/* <TrafficLightBG /> */}
       <SidebarToggle />
     </>
   )

apps/webapp/src/Style/Combobox.tsx

@@ -0,0 +1,103 @@
+import styled, { css } from 'styled-components'
+
+export const ComboboxItem = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  gap: ${({ theme }) => theme.spacing.tiny};
+
+  :first-child {
+    border-radius: 6px 6px 0 0;
+  }
+
+  :last-child {
+    border-radius: 0 0 6px 6px;
+  }
+
+  font-weight: 400;
+  padding: 0 8px;
+  min-height: 36px;
+  user-select: none;
+  width: 300px;
+  color: ${({ theme }) => theme.colors.text.default};
+  &.highlight {
+    background: ${({ theme }) => theme.colors.background.highlight};
+  }
+  cursor: pointer;
+
+  :hover {
+    background-color: ${({ theme }) => theme.colors.background.highlight};
+  }
+
+  & > svg {
+    color: ${({ theme }) => theme.colors.gray[4]};
+  }
+`
+export const ComboboxRoot = styled.div<{ isOpen: boolean }>`
+  :hover {
+    ${ComboboxItem} {
+      &.highlight {
+        &:hover {
+        }
+      }
+    }
+  }
+  /* &.reversed {
+    transform: rotate(180deg);
+    ${ComboboxItem} {
+      transform: rotate(-180deg);
+    }
+  } */
+
+  ${({ isOpen, theme }) =>
+    isOpen &&
+    css`
+      top: -9999px;
+      left: -9999px;
+      position: absolute;
+      padding: 0;
+      background: none !important;
+      display: flex;
+      margin: 0;
+      z-index: 11;
+      height: fit-content;
+
+      > div {
+        background: ${theme.colors.background.modal};
+        height: fit-content;
+        /* max-height: 400px; */
+        box-shadow: rgba(0, 0, 0, 0.133) 0 3.2px 7.2px 0, rgba(0, 0, 0, 0.11) 0 0.6px 1.8px 0;
+        border-radius: ${theme.borderRadius.small};
+
+        > section {
+          max-height: 30vh;
+          overflow-y: auto;
+          overflow-x: hidden;
+        }
+      }
+    `}
+`
+
+export const ItemTitle = styled.div`
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  /* width: 200px; */
+`
+
+export const ItemRightIcons = styled.div`
+  display: flex;
+  flex-gap: ${({ theme }) => theme.spacing.tiny};
+`
+
+export const ItemDesc = styled.div`
+  margin: ${({ theme }) => theme.spacing.tiny} 0;
+  color: ${({ theme }) => theme.colors.text.fade};
+  font-size: 0.8rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`
+export const ItemCenterWrapper = styled.div`
+  width: 90%;
+`

apps/webapp/src/Style/GlobalStyle.ts

@@ -1,10 +1,10 @@
-import { normalize } from '@mexit/shared'
 import { createGlobalStyle, css } from 'styled-components'
 
-import { ThinScrollbar } from './Helpers'
-import { EditorBalloonStyles, TippyBalloonStyles } from '@mexit/shared'
+import { EditorBalloonStyles, TippyBalloonStyles, normalize } from '@mexit/shared'
 
+import { ThinScrollbar } from './Helpers'
 import { ModalStyles } from './Refactor'
+import { customStyles } from '../Themes/customStyles'
 
 const GlobalStyle = createGlobalStyle`
   ${normalize}; // NormalizeCSS normalization
@@ -84,6 +84,8 @@ const GlobalStyle = createGlobalStyle`
   button {
     border: none;
   }
+
+  ${({ theme }) => theme.custom && customStyles[theme.custom]}
 `
 
 export default GlobalStyle

apps/webapp/src/Style/Search.tsx

@@ -81,6 +81,16 @@ export const SearchFilterList = styled.div`
   gap: ${({ theme }) => theme.spacing.small};
 `
 
+export const SearchFilterListWrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: ${({ theme }) => theme.spacing.small};
+  margin-right: ${({ theme }) => theme.spacing.medium};
+  max-width: 70vw;
+  overflow-x: auto;
+`
+
 export const SearchFilterCancel = styled.div`
   cursor: pointer;
   display: flex;

apps/webapp/src/Themes/SpaceAmethyst.tsx

@@ -0,0 +1,21 @@
+import { transparentize } from 'polished'
+import { css } from 'styled-components'
+import { SpaceBlocksCss } from './spaceBlocks'
+
+const blockCss = SpaceBlocksCss({
+  containerStyle: css`
+    background-color: ${({ theme }) => transparentize(0.1, '#1b1e2a')};
+    box-shadow: 0px 15px 40px ${({ theme }) => transparentize(0.9, theme.colors.palette.black)};
+    border: 1px solid ${({ theme }) => transparentize(0.8, theme.colors.gray[6])};
+    border-radius: ${({ theme }) => theme.borderRadius.small};
+  `,
+  containerStyleReset: css`
+    background-color: transparent;
+    box-shadow: none;
+    border-radius: 0;
+  `,
+  heightMain: 'calc(100vh - 4rem)'
+})
+export const SpaceAmethyst = css`
+  ${blockCss}
+`

apps/webapp/src/Themes/customStyles.tsx

@@ -0,0 +1,16 @@
+import { HackerStyles } from './hackerTheme.custom'
+import { NeoLightStyles } from './neoLight.custom'
+import { NeoDarkStyles } from './neoDark.custom'
+import { ImperialStyles, RenarStyles } from './renarTheme.custom'
+import { VertigoStyles } from './vertigoTheme.custom'
+import { SpaceAmethyst } from './SpaceAmethyst'
+
+export const customStyles = {
+  VertigoStyles,
+  ImperialStyles,
+  RenarStyles,
+  HackerStyles,
+  NeoLightStyles,
+  NeoDarkStyles,
+  SpaceAmethyst
+}