WIP: add editable Hero SVG

jaen-data/patches.txt

@@ -73,3 +73,4 @@ https://osg.snek.at/storage/BQACAgQAAx0Ed6zoewADSWYjpfRenGeSBKOC0xrAQCrA_0VlAAJi
 https://osg.snek.at/storage/BQACAgQAAx0Ed6zoewADSmYkBhU5405RAAFGyfiKY9vMlnuugQACBBYAAuwpIVEdJuCaNUTQVC8E
 https://osg.snek.at/storage/BQACAgQAAx0Ed6zoewADYmYmEY697MOBK9_i_u1w61jfM0lkAAIeFQACSJQxUWhUMe1B8DtXLwQ
 https://osg.snek.at/storage/BQACAgQAAx0Ed6zoewADZWYmFrAvhZBs4HJqu7EuyUO3v_syAAIsFQACSJQxUUVxs2LNaMfFLwQ
+https://osg.snek.at/storage/BQACAgQAAx0Ed6zoewADqWZRw0hi_O1VgVztM6TUhAdqu7TDAALFEAAC-CCQUrJrrIshigGWLwQ

package.json

@@ -31,18 +31,19 @@
     "gatsby-plugin-cloudflare-pages": "^1.0.2",
     "gatsby-plugin-jaen": "^1.0.0-rc.102",
     "github-slugger": "^2.0.0",
+    "hast-util-sanitize": "^5.0.1",
     "prismjs": "^1.29.0",
     "quantum-circuit": "^0.9.218",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-fast-marquee": "^1.6.4",
     "react-highlight-words": "^0.20.0",
-    "react-tsparticles": "^2.12.2",
-    "tsparticles": "^2.12.0",
-    "zxcvbn": "^4.4.2",
     "react-simple-code-editor": "^0.13.1",
+    "react-tsparticles": "^2.12.2",
     "snek-query": "^0.0.114",
-    "use-debounce": "^10.0.0"
+    "tsparticles": "^2.12.0",
+    "use-debounce": "^10.0.0",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@types/github-slugger": "^2.0.0",

src/components/mdx-editor/SvgMdxEditor.tsx

@@ -0,0 +1,59 @@
+import { FC } from 'react';
+import { MdxFieldProps, UncontrolledMdxField } from '@atsnek/jaen-fields-mdx';
+import { mdxEditorComponents } from './MdxEditor';
+import Heading from '../main-content/heading/components/Heading';
+import { Stack, chakra } from '@chakra-ui/react';
+import { text } from 'stream/consumers';
+import TabsTemplate from './TabsTemplate';
+
+const svgEditorComponents: MdxFieldProps['components'] = {
+  // include all svg components
+  svg: props => <chakra.svg children={props.children} />,
+  style: props => <style children={props.children} />,
+  defs: props => <defs children={props.children} />,
+  mask: props => <mask children={props.children} />,
+  path: props => <path children={props.children} />,
+  text: props => <text children={props.children} />,
+  rect: props => <rect children={props.children} />,
+  g: props => <g children={props.children} />,
+  circle: props => <circle children={props.children} />,
+  polygon: props => <polygon children={props.children} />,
+  line: props => <line children={props.children} />,
+};
+
+delete svgEditorComponents.Filesystem;
+delete svgEditorComponents.DocsIndex;
+delete svgEditorComponents.ImageCard;
+delete svgEditorComponents.Image;
+
+interface ICodeMdxEditorProps
+  extends Omit<Parameters<typeof UncontrolledMdxField>[0], 'components'> {}
+
+/**
+ * Standalone MDX editor without automatic loading/saving by Jaen.
+ */
+const CodeMdxEditor: FC<ICodeMdxEditorProps> = ({
+  ...props
+}) => {
+  return (
+    <Stack
+      pt={14}
+      sx={{
+        '.cm-editor': {
+          height: '60dvh'
+        }
+      }}
+    >
+      <UncontrolledMdxField
+        {...props}
+        tabsTemplate={TabsTemplate}
+        components={{
+          wrapper: ({ children }) => <Stack>{children}</Stack>,
+          ...svgEditorComponents
+        }}
+      />
+    </Stack>
+  );
+};
+
+export default CodeMdxEditor;

src/components/mdx-editor/TabsTemplate.tsx

@@ -0,0 +1,89 @@
+import {AddIcon} from '@chakra-ui/icons'
+import {
+  Box,
+  Button,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Spacer,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs
+} from '@chakra-ui/react'
+import React, {useState} from 'react'
+
+interface ComponentInfoProps {
+  items: Array<{
+    label: string
+    onClick: () => void
+  }>
+}
+
+export const ComponentInfo: React.FC<ComponentInfoProps> = ({items}) => (
+  <Menu>
+    {/* <MenuButton
+      as={Button}
+      leftIcon={<AddIcon />}
+      size="sm"
+      variant="link"
+      mx="2">
+      Components
+    </MenuButton> */}
+
+    <MenuList>
+      {items.map(item => (
+        <MenuItem key={item.label} onClick={item.onClick}>
+          {item.label}
+        </MenuItem>
+      ))}
+    </MenuList>
+  </Menu>
+)
+
+export interface TabsProps {
+  tabs: Array<{
+    label: React.ReactNode
+    content: React.ReactNode
+  }>
+  selectedTab: number
+  componentsInfo?: ComponentInfoProps['items']
+}
+
+const TabsTemplate: React.FC<TabsProps> = props => {
+  const [selectedTab, setSelectedTab] = useState(props.selectedTab)
+
+  const handleTabChange = (index: number) => {
+    setSelectedTab(index)
+  }
+
+  return (
+    <Box position="relative">
+      <Tabs
+        index={selectedTab}
+        onChange={handleTabChange}
+        pos="relative"
+        size="sm">
+        <TabList pos="sticky" top="0" zIndex="1">
+          {props.tabs.map((tab, i) => (
+            <Tab key={i}>{tab.label}</Tab>
+          ))}
+          <Spacer />
+          <ComponentInfo items={props.componentsInfo || []} />
+        </TabList>
+
+        <TabPanels>
+          {props.tabs.map((tab, i) => (
+            <TabPanel key={i} p="0">
+              {tab.content}
+            </TabPanel>
+          ))}
+        </TabPanels>
+      </Tabs>
+    </Box>
+  )
+}
+
+export default TabsTemplate