WIP: use MD for highlight quotes

packages/web/components/patterns/HighlightView.tsx

@@ -11,6 +11,7 @@ import {
 } from '../elements/LayoutPrimitives'
 import { styled } from '../tokens/stitches.config'
 import { HighlightViewNote } from './HighlightNotes'
+import ReactMarkdown from 'react-markdown'
 
 type HighlightViewProps = {
   highlight: Highlight
@@ -72,7 +73,8 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
             }
           }}
         >
-          <SpanBox
+          <ReactMarkdown children={props.highlight.quote ?? ''} />
+          {/* <SpanBox
             css={{
               p: '1px',
               borderRadius: '2px',
@@ -89,7 +91,7 @@ export function HighlightView(props: HighlightViewProps): JSX.Element {
                 )}
               </Fragment>
             ))}
-          </SpanBox>
+          </SpanBox> */}
         </StyledQuote>
         <Box css={{ display: 'block', pt: '5px' }}>
           {props.highlight.labels?.map(({ name, color }, index) => (

packages/web/lib/highlights/createHighlight.ts

@@ -11,6 +11,7 @@ import { extendRangeToWordBoundaries } from './normalizeHighlightRange'
 import type { Highlight } from '../networking/fragments/highlightFragment'
 import { removeHighlights } from './deleteHighlight'
 import { ArticleMutations } from '../articleActions'
+import { NodeHtmlMarkdown } from 'node-html-markdown'
 
 type CreateHighlightInput = {
   selection: SelectionAttributes
@@ -28,6 +29,20 @@ type CreateHighlightOutput = {
   newHighlightIndex?: number
 }
 
+/* ********************************************************* *
+ * Re-use
+ * If using it several times, creating an instance saves time
+ * ********************************************************* */
+const nhm = new NodeHtmlMarkdown(
+  /* options (optional) */ {},
+  /* customTransformers (optional) */ undefined,
+  /* customCodeBlockTranslators (optional) */ undefined
+)
+
+export const htmlToMarkdown = (html: string) => {
+  return nhm.translate(/* html */ html)
+}
+
 export async function createHighlight(
   input: CreateHighlightInput,
   articleMutations: ArticleMutations
@@ -42,6 +57,14 @@ export async function createHighlight(
 
   extendRangeToWordBoundaries(range)
 
+  // selection: Selection
+  var container = document.createElement('div')
+  // for (var i = 0, len = input.selection.selection.rangeCount; i < len; ++i) {
+  container.appendChild(range.cloneContents())
+  // }
+  console.log('container HTML: ', container.innerHTML)
+  console.log('container markdown: ', htmlToMarkdown(container.innerHTML))
+
   const id = uuidv4()
   const patch = generateDiffPatch(range)
 
@@ -81,7 +104,7 @@ export async function createHighlight(
   const newHighlightAttributes = {
     prefix: highlightAttributes.prefix,
     suffix: highlightAttributes.suffix,
-    quote: highlightAttributes.quote,
+    quote: htmlToMarkdown(container.innerHTML),
     id,
     shortId: nanoid(8),
     patch,

packages/web/package.json

@@ -44,6 +44,7 @@
     "markdown-it": "^13.0.1",
     "nanoid": "^3.1.29",
     "next": "^12.1.0",
+    "node-html-markdown": "^1.3.0",
     "phosphor-react": "^1.4.0",
     "pspdfkit": "^2022.2.3",
     "react": "^17.0.2",