feat: Markdown, HTML & JSON export options for super notes (#2054)

2022-11-25 13:58:44 +05:30
parent ff1d71c2f8
commit dcc8cfbe45
9 changed files with 268 additions and 61 deletions
--- a/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
+++ b/packages/web/src/javascripts/Components/NotesOptions/SuperNoteOptions.tsx
@@ -0,0 +1,88 @@
+import { SNNote } from '@standardnotes/snjs'
+import {
+  PlatformedKeyboardShortcut,
+  SUPER_EXPORT_HTML,
+  SUPER_EXPORT_JSON,
+  SUPER_EXPORT_MARKDOWN,
+} from '@standardnotes/ui-services'
+import { useRef, useState } from 'react'
+import { useCommandService } from '../ApplicationView/CommandProvider'
+import Icon from '../Icon/Icon'
+import { KeyboardShortcutIndicator } from '../KeyboardShortcutIndicator/KeyboardShortcutIndicator'
+import Menu from '../Menu/Menu'
+import MenuItem from '../Menu/MenuItem'
+import Popover from '../Popover/Popover'
+import HorizontalSeparator from '../Shared/HorizontalSeparator'
+import { iconClass, menuItemClassNames, menuItemSwitchClassNames } from './ClassNames'
+
+type Props = {
+  note: SNNote
+  markdownShortcut?: PlatformedKeyboardShortcut
+  enableSuperMarkdownPreview: () => void
+}
+
+const SuperNoteOptions = ({ note, markdownShortcut, enableSuperMarkdownPreview }: Props) => {
+  const commandService = useCommandService()
+
+  const exportButtonRef = useRef<HTMLButtonElement>(null)
+  const [isExportMenuOpen, setIsExportMenuOpen] = useState(false)
+
+  return (
+    <>
+      <HorizontalSeparator classes="my-2" />
+
+      <div className="my-1 px-3 text-base font-semibold uppercase text-text lg:text-xs">Super</div>
+
+      <button className={menuItemClassNames} onClick={enableSuperMarkdownPreview}>
+        <div className="flex w-full items-center justify-between">
+          <span className="flex">
+            <Icon type="markdown" className={iconClass} />
+            Show Markdown
+          </span>
+          {markdownShortcut && <KeyboardShortcutIndicator shortcut={markdownShortcut} />}
+        </div>
+      </button>
+
+      <button
+        ref={exportButtonRef}
+        className={menuItemSwitchClassNames}
+        onClick={() => {
+          setIsExportMenuOpen((open) => !open)
+        }}
+      >
+        <div className="flex items-center">
+          <Icon type="download" className={iconClass} />
+          Export
+        </div>
+        <Icon type="chevron-right" className="text-neutral" />
+      </button>
+      <Popover
+        side="left"
+        align="start"
+        open={isExportMenuOpen}
+        anchorElement={exportButtonRef.current}
+        togglePopover={() => {
+          setIsExportMenuOpen(!isExportMenuOpen)
+        }}
+        className="py-1"
+      >
+        <Menu a11yLabel={'Super note export menu'} isOpen={isExportMenuOpen}>
+          <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_JSON, note.title)}>
+            <Icon type="code" className={iconClass} />
+            Export as JSON
+          </MenuItem>
+          <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_MARKDOWN, note.title)}>
+            <Icon type="markdown" className={iconClass} />
+            Export as Markdown
+          </MenuItem>
+          <MenuItem onClick={() => commandService.triggerCommand(SUPER_EXPORT_HTML, note.title)}>
+            <Icon type="rich-text" className={iconClass} />
+            Export as HTML
+          </MenuItem>
+        </Menu>
+      </Popover>
+    </>
+  )
+}
+
+export default SuperNoteOptions