Lexical Plain Text Editor with Lexical Rich Text preview; custom extensible MDAST transformer for lossless conversions

Author: Soxasora

components/comment.js

@@ -1,6 +1,6 @@
 import itemStyles from './item.module.css'
 import styles from './comment.module.css'
-import Text, { SearchText } from './text'
+import { LegacyText, SearchText } from './text'
 import Link from 'next/link'
 import Reply from './reply'
 import { useEffect, useMemo, useRef, useState } from 'react'
@@ -287,11 +287,11 @@ export default function Comment ({
                 {item.searchText
                   ? <SearchText text={item.searchText} />
                   : (
-                    <Text itemId={item.id} topLevel={topLevel} rel={item.rel ?? UNKNOWN_LINK_REL} outlawed={item.outlawed} imgproxyUrls={item.imgproxyUrls}>
+                    <LegacyText itemId={item.id} topLevel={topLevel} rel={item.rel ?? UNKNOWN_LINK_REL} outlawed={item.outlawed} imgproxyUrls={item.imgproxyUrls}>
                       {item.outlawed && !me?.privates?.wildWestMode
                         ? '*stackers have outlawed this. turn on wild west mode in your [settings](/settings) to see outlawed content.*'
                         : truncate ? truncateString(item.text) : item.text}
-                    </Text>)}
+                    </LegacyText>)}
               </div>
               )}
         </div>

components/editor/contexts/item.js

@@ -0,0 +1,28 @@
+import { createContext, useContext, useMemo } from 'react'
+import { UNKNOWN_LINK_REL } from '@/lib/constants'
+
+const LexicalItemContext = createContext({
+  imgproxyUrls: null,
+  topLevel: false,
+  outlawed: false,
+  rel: UNKNOWN_LINK_REL
+})
+
+export function LexicalItemContextProvider ({ imgproxyUrls, topLevel, outlawed, rel, children }) {
+  const value = useMemo(() => ({
+    imgproxyUrls,
+    topLevel,
+    outlawed,
+    rel
+  }), [imgproxyUrls, topLevel, outlawed, rel])
+
+  return (
+    <LexicalItemContext.Provider value={value}>
+      {children}
+    </LexicalItemContext.Provider>
+  )
+}
+
+export function useLexicalItemContext () {
+  return useContext(LexicalItemContext)
+}

components/editor/contexts/toolbar.js

@@ -0,0 +1,36 @@
+import { createContext, useContext, useMemo, useState, useCallback } from 'react'
+
+const INITIAL_STATE = {
+  previewMode: false
+}
+
+const ToolbarContext = createContext()
+
+export const ToolbarContextProvider = ({ children }) => {
+  const [toolbarState, setToolbarState] = useState(INITIAL_STATE)
+
+  const batchUpdateToolbarState = useCallback((updates) => {
+    setToolbarState((prev) => ({ ...prev, ...updates }))
+  }, [])
+
+  const updateToolbarState = useCallback((key, value) => {
+    setToolbarState((prev) => ({
+      ...prev,
+      [key]: value
+    }))
+  }, [])
+
+  const contextValue = useMemo(() => {
+    return { toolbarState, updateToolbarState, batchUpdateToolbarState }
+  }, [toolbarState, updateToolbarState])
+
+  return (
+    <ToolbarContext.Provider value={contextValue}>
+      {children}
+    </ToolbarContext.Provider>
+  )
+}
+
+export const useToolbarState = () => {
+  return useContext(ToolbarContext)
+}

components/editor/editor.js

@@ -0,0 +1,106 @@
+import FormikBridgePlugin from '@/components/editor/plugins/formik'
+import LocalDraftPlugin from '@/components/editor/plugins/local-draft'
+import { MaxLengthPlugin } from '@/components/editor/plugins/max-length'
+import MentionsPlugin from '@/components/editor/plugins/mention'
+import FileUploadPlugin from '@/components/editor/plugins/upload'
+import PreviewPlugin from '@/components/editor/plugins/preview'
+import { AutoFocusExtension } from '@lexical/extension'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer'
+import classNames from 'classnames'
+import { useFormikContext } from 'formik'
+import { configExtension, defineExtension } from 'lexical'
+import { useMemo, useState } from 'react'
+import theme from './theme'
+import styles from './theme/theme.module.css'
+import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin'
+import { ToolbarPlugin } from './plugins/tinytoolbar'
+import { ToolbarContextProvider } from './contexts/toolbar'
+
+/**
+ * main lexical editor component with formik integration
+ * @param {string} props.name - form field name
+ * @param {string} [props.appendValue] - value to append to initial content
+ * @param {boolean} [props.autoFocus] - whether to auto-focus the editor
+ * @returns {JSX.Element} lexical editor component
+ */
+export default function SNEditor ({ name, appendValue, autoFocus, topLevel, ...props }) {
+  const { values } = useFormikContext()
+
+  const editor = useMemo(() =>
+    defineExtension({
+      $initialEditorState: (editor) => {
+        // existing lexical state
+        if (values.lexicalState) {
+          try {
+            const state = editor.parseEditorState(values.lexicalState)
+            if (!state.isEmpty()) {
+              editor.setEditorState(state)
+            }
+          } catch (error) {
+            console.error('failed to load initial state:', error)
+          }
+        }
+      },
+      name: 'editor',
+      namespace: 'sn',
+      dependencies: [
+        configExtension(AutoFocusExtension, { disabled: !autoFocus })
+      ],
+      theme: { ...theme, topLevel: topLevel ? 'topLevel' : '' },
+      onError: (error) => console.error('editor has encountered an error:', error)
+    }), [autoFocus, topLevel])
+
+  return (
+    <LexicalExtensionComposer extension={editor} contentEditable={null}>
+      <ToolbarContextProvider>
+        <EditorContent topLevel={topLevel} name={name} {...props} />
+      </ToolbarContextProvider>
+    </LexicalExtensionComposer>
+  )
+}
+
+/**
+ * editor content component containing all plugins and UI elements
+ * @param {string} props.name - form field name for draft saving
+ * @param {string} props.placeholder - placeholder text for empty editor
+ * @param {Object} props.lengthOptions - max length configuration
+ * @param {boolean} props.topLevel - whether this is a top-level editor
+ * @returns {JSX.Element} editor content with all plugins
+ */
+function EditorContent ({ name, placeholder, lengthOptions, topLevel }) {
+  const [floatingAnchorElem, setFloatingAnchorElem] = useState(null)
+
+  const onRef = (_floatingAnchorElem) => {
+    if (_floatingAnchorElem !== null) {
+      setFloatingAnchorElem(_floatingAnchorElem)
+    }
+  }
+
+  return (
+    <>
+      <div className={styles.editorContainer}>
+        <ToolbarPlugin topLevel={topLevel} />
+        {/* we only need a plain text editor for markdown */}
+        <PlainTextPlugin
+          contentEditable={
+            <div className={styles.editor} ref={onRef}>
+              <ContentEditable
+                className={classNames(styles.editorInput, styles.text, topLevel && 'topLevel')}
+                placeholder={<div className={styles.editorPlaceholder}>{placeholder}</div>}
+              />
+            </div>
+          }
+          ErrorBoundary={LexicalErrorBoundary}
+        />
+        {floatingAnchorElem && <PreviewPlugin editorRef={floatingAnchorElem} topLevel={topLevel} />}
+        <FileUploadPlugin anchorElem={floatingAnchorElem} />
+        <MentionsPlugin />
+        <MaxLengthPlugin lengthOptions={lengthOptions} />
+        <LocalDraftPlugin name={name} />
+        <FormikBridgePlugin />
+      </div>
+    </>
+  )
+}

components/editor/index.js

@@ -0,0 +1,31 @@
+import { forwardRef, useMemo } from 'react'
+import { useRouter } from 'next/router'
+import dynamic from 'next/dynamic'
+import { LexicalItemContextProvider } from './contexts/item'
+import { applySNCustomizations } from '@/lib/lexical/html/customs'
+
+export const SNReader = forwardRef(function SNReader ({ html, children, outlawed, imgproxyUrls, topLevel, rel, ...props }, ref) {
+  const router = useRouter()
+  const snCustomizedHTML = useMemo(() => (
+    <div
+      className={props.className}
+      // suppressHydrationWarning is used as a band-aid but maybe applySNCustomizations is not the proper solution.
+      dangerouslySetInnerHTML={{ __html: applySNCustomizations(html, { outlawed, imgproxyUrls, topLevel }) }}
+      suppressHydrationWarning
+    />
+  ), [html, outlawed, imgproxyUrls, topLevel, props.className])
+
+  // debug html with ?html
+  if (router.query.html) return snCustomizedHTML
+
+  const Reader = useMemo(() => dynamic(() => import('./reader'), { ssr: false, loading: () => snCustomizedHTML }), [])
+
+  return (
+
+    <LexicalItemContextProvider imgproxyUrls={imgproxyUrls} topLevel={topLevel} outlawed={outlawed} rel={rel}>
+      <Reader {...props} contentRef={ref} topLevel={topLevel}>
+        {children}
+      </Reader>
+    </LexicalItemContextProvider>
+  )
+})

components/editor/plugins/code-theme.js

@@ -0,0 +1,18 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useEffect } from 'react'
+import useDarkMode from '@/components/dark-mode'
+
+/** syncs code block syntax highlighting theme with site dark mode */
+export function CodeThemePlugin () {
+  const [editor] = useLexicalComposerContext()
+  const [darkMode] = useDarkMode()
+
+  const theme = darkMode ? 'github-dark-default' : 'github-light-default'
+
+  useEffect(() => {
+    if (!editor._updateCodeTheme) return
+    return editor._updateCodeTheme(theme)
+  }, [darkMode, theme])
+
+  return null
+}

components/editor/plugins/content/media/index.js

@@ -0,0 +1,41 @@
+import MediaOrLink, { LinkRaw } from '@/components/media-or-link'
+import { useLexicalItemContext } from '@/components/editor/contexts/item'
+import { IMGPROXY_URL_REGEXP, decodeProxyUrl } from '@/lib/url'
+
+/**
+ * wrapper component that handles media rendering with item-specific logic
+ * like imgproxy, outlawed, rel (link) and top level
+
+ * @param {string} props.src - media source url
+ * @param {string} props.status - media status (error, pending, etc.)
+ * @param {string} props.kind - media kind (image, video)
+ * @param {number} props.width - media width
+ * @param {number} props.height - media height
+ * @param {number} props.maxWidth - media max width
+ * @returns {JSX.Element} media or link component
+ */
+export default function Media ({ src, status, kind, width, height, maxWidth }) {
+  const { imgproxyUrls, rel, outlawed, topLevel } = useLexicalItemContext()
+  const url = IMGPROXY_URL_REGEXP.test(src) ? decodeProxyUrl(src) : src
+  const srcSet = imgproxyUrls?.[url]
+
+  if (outlawed) {
+    return <p className='outlawed'>{url}</p>
+  }
+
+  if (status === 'error') {
+    return <LinkRaw src={url} rel={rel}>{url}</LinkRaw>
+  }
+
+  return (
+    <MediaOrLink
+      src={src}
+      srcSet={srcSet}
+      rel={rel}
+      kind={kind}
+      linkFallback
+      preTailor={{ width, height, maxWidth: maxWidth ?? 500 }}
+      topLevel={topLevel}
+    />
+  )
+}

components/editor/plugins/decorative/toc.js

@@ -0,0 +1,52 @@
+import Link from 'next/link'
+import { buildNestedTocStructure } from '@/lib/lexical/nodes/misc/toc'
+
+/**
+ * recursively renders table of contents items with nested structure
+
+ * @param {Object} props.item - toc item with text, slug, and optional children
+ * @param {number} props.index - item index for key generation
+ * @returns {JSX.Element} list item with nested children
+ */
+function TocItem ({ item, index }) {
+  const hasChildren = item.children && item.children.length > 0
+  return (
+    <li key={`${item.slug}-${index}`}>
+      <Link href={`#${item.slug}`}>
+        {item.text}
+      </Link>
+      {hasChildren && (
+        <ul>
+          {item.children.map((child, idx) => (
+            <TocItem key={`${child.slug}-${idx}`} item={child} index={idx} />
+          ))}
+        </ul>
+      )}
+    </li>
+  )
+}
+
+/**
+ * displays a collapsible table of contents from heading data
+
+ * @param {Array} props.headings - array of heading objects with text, depth, and slug
+ * @returns {JSX.Element} collapsible details element with toc list
+ */
+export function TableOfContents ({ headings }) {
+  const tocItems = buildNestedTocStructure(headings)
+
+  return (
+    <details className='sn__collapsible sn__toc'>
+      <summary className='sn__collapsible__header'>table of contents</summary>
+      {tocItems.length > 0
+        ? (
+          <ul>
+            {tocItems.map((item, index) => (
+              <TocItem key={`${item.slug}-${index}`} item={item} index={index} />
+            ))}
+          </ul>
+          )
+        : <div className='text-muted fst-italic'>no headings</div>}
+    </details>
+  )
+}

components/editor/plugins/formatting/math/index.js

@@ -0,0 +1,28 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable'
+import ErrorBoundary from '@/components/error-boundary'
+import KatexRenderer from '@/components/katex-renderer'
+import { useToast } from '@/components/toast'
+
+export default function MathComponent ({ math, inline }) {
+  const [editor] = useLexicalComposerContext()
+  const isEditable = useLexicalEditable()
+  const toaster = useToast()
+
+  return (
+    <ErrorBoundary onError={(e) => editor._onError(e)} fallback={null}>
+      <KatexRenderer
+        equation={math}
+        inline={inline}
+        onClick={() => {
+          if (!isEditable) {
+            try {
+              navigator.clipboard.writeText(math)
+              toaster.success('math copied to clipboard')
+            } catch {}
+          }
+        }}
+      />
+    </ErrorBoundary>
+  )
+}