+ {item.lexicalState &&
+
+
+
+ {
+ try {
+ toaster.success('markdown copied to clipboard')
+ navigator.clipboard.writeText(item.text)
+ } catch (error) {
+ toaster.danger('failed to copy markdown to clipboard')
+ }
+ }}
+ >
+ copy markdown
+
+ )
+}
+
+// TODO: remove this once we're done debugging
+// temporary debugging tool for lexical state migration
+function DevLexicalConversionDropdownItem ({ item }) {
+ const toaster = useToast()
+ const router = useRouter()
+ const isPost = !item.parentId
+ const [shiftHeld, setShiftHeld] = useState(false)
+
+ const [executeConversion] = useMutation(gql`
+ mutation executeConversion($itemId: ID!, $fullRefresh: Boolean!) {
+ executeConversion(itemId: $itemId, fullRefresh: $fullRefresh) {
+ success
+ message
+ }
+ }
+ `, {
+ onCompleted: (data) => {
+ if (data.executeConversion.success) {
+ toaster.success('conversion scheduled, refreshing in 15 seconds...')
+ setTimeout(() => {
+ isPost ? router.push(`/items/${item.id}`) : router.push(`/items/${item.parentId}?commentId=${item.id}`)
+ toaster.success('refreshing now...')
+ }, 15000)
+ } else {
+ toaster.danger(data.executeConversion.message)
+ }
+ }
+ })
+
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (e.shiftKey) {
+ setShiftHeld(true)
+ }
+ }
+
+ const handleKeyUp = (e) => {
+ if (!e.shiftKey) {
+ setShiftHeld(false)
+ }
+ }
+
+ window.addEventListener('keydown', handleKeyDown)
+ window.addEventListener('keyup', handleKeyUp)
+
+ return () => {
+ window.removeEventListener('keydown', handleKeyDown)
+ window.removeEventListener('keyup', handleKeyUp)
+ }
+ }, [])
+
+ // press shift to force a full refresh
+ const getDropdownText = () => {
+ if (shiftHeld) {
+ return 'FULL REFRESH!'
+ }
+ return !item.lexicalState ? 'convert to lexical' : 'refresh html'
+ }
+
+ return (
+ { executeConversion({ variables: { itemId: item.id, fullRefresh: shiftHeld } }) }}>
+ {getDropdownText()}
+
+ )
+}
diff --git a/components/job-form.js b/components/job-form.js
index af195585b4..5269de0963 100644
--- a/components/job-form.js
+++ b/components/job-form.js
@@ -1,4 +1,4 @@
-import { Checkbox, Form, Input, MarkdownInput, SubmitButton } from './form'
+import { Checkbox, Form, Input, SubmitButton, LexicalInput } from './form'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import Image from 'react-bootstrap/Image'
@@ -50,6 +50,7 @@ export default function JobForm ({ item, sub }) {
remote: item?.remote || false,
boost: item?.boost || '',
text: item?.text || '',
+ lexicalState: item?.lexicalState || '',
url: item?.url || '',
stop: false,
start: false
@@ -97,13 +98,14 @@ export default function JobForm ({ item, sub }) {
/>
- 
+
+
+
+ )
+}
diff --git a/components/layout.module.css b/components/layout.module.css
index 798a085d04..f1acdbd69f 100644
--- a/components/layout.module.css
+++ b/components/layout.module.css
@@ -29,4 +29,9 @@
.content form {
width: 100%;
+}
+
+/* special case for post creation, 1:1 width editor-resulting post */
+.content:has(form [contenteditable="true"]) {
+ max-width: 850px !important;
}
\ No newline at end of file
diff --git a/components/lexical/contexts/item.js b/components/lexical/contexts/item.js
new file mode 100644
index 0000000000..11fef4b0bd
--- /dev/null
+++ b/components/lexical/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 (
+
+ {children}
+
+ )
+}
+
+export function useLexicalItemContext () {
+ return useContext(LexicalItemContext)
+}
diff --git a/components/lexical/contexts/preferences.js b/components/lexical/contexts/preferences.js
new file mode 100644
index 0000000000..1fe380ef35
--- /dev/null
+++ b/components/lexical/contexts/preferences.js
@@ -0,0 +1,54 @@
+import { createContext, useContext, useMemo, useState, useCallback } from 'react'
+
+export const DEFAULT_PREFERENCES = {
+ startInMarkdown: true,
+ showToolbar: false,
+ showFloatingToolbar: true
+}
+
+const PREFERENCES_STORAGE_KEY = 'sn-lexical-preferences'
+
+const LexicalPreferencesContext = createContext({
+ setOption: (name, value) => {},
+ prefs: DEFAULT_PREFERENCES
+})
+
+export const LexicalPreferencesContextProvider = ({ children }) => {
+ const [prefs, setPrefs] = useState(() => {
+ try {
+ if (typeof window === 'undefined') return DEFAULT_PREFERENCES // SSR
+ const stored = window.localStorage.getItem(PREFERENCES_STORAGE_KEY)
+ return stored ? { ...DEFAULT_PREFERENCES, ...JSON.parse(stored) } : DEFAULT_PREFERENCES
+ } catch (error) {
+ console.warn('failed to load preferences from local:', error)
+ return DEFAULT_PREFERENCES // fallback
+ }
+ })
+
+ const setOption = useCallback((name, value) => {
+ setPrefs((prev) => {
+ const newPrefs = { ...prev, [name]: value }
+ // save to local
+ try {
+ window.localStorage.setItem(PREFERENCES_STORAGE_KEY, JSON.stringify(newPrefs))
+ } catch (error) {
+ console.warn('failed to save preferences in local:', error)
+ }
+ return newPrefs
+ })
+ }, [])
+
+ const preferencesContextValue = useMemo(() => {
+ return { setOption, prefs }
+ }, [setOption, prefs])
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const useLexicalPreferences = () => {
+ return useContext(LexicalPreferencesContext)
+}
diff --git a/components/lexical/contexts/sharedhistory.js b/components/lexical/contexts/sharedhistory.js
new file mode 100644
index 0000000000..69476f9522
--- /dev/null
+++ b/components/lexical/contexts/sharedhistory.js
@@ -0,0 +1,20 @@
+import { createContext, useContext, useMemo } from 'react'
+import { createEmptyHistoryState } from '@lexical/react/LexicalHistoryPlugin'
+
+const SharedHistoryContext = createContext({
+ historyState: null
+})
+
+export const SharedHistoryContextProvider = ({ children }) => {
+ const historyContext = useMemo(() => ({ historyState: createEmptyHistoryState() }), [])
+
+ return (
+
+ {children}
+
+ )
+}
+
+export const useSharedHistoryContext = () => {
+ return useContext(SharedHistoryContext)
+}
diff --git a/components/lexical/contexts/table.js b/components/lexical/contexts/table.js
new file mode 100644
index 0000000000..aa16958ae7
--- /dev/null
+++ b/components/lexical/contexts/table.js
@@ -0,0 +1,34 @@
+import { createContext, useState, useMemo, useContext } from 'react'
+
+export const TableContext = createContext({
+ cellConfig: null,
+ cellPlugins: null,
+ setCellConfig: () => {}
+})
+
+export function TableContextProvider ({ children }) {
+ const [contextValue, setContextValue] = useState({
+ cellConfig: null,
+ cellPlugins: null
+ })
+
+ const value = useMemo(() => {
+ return {
+ cellConfig: contextValue.cellConfig,
+ cellPlugins: contextValue.cellPlugins,
+ set: (cellConfig, cellPlugins) => {
+ setContextValue({ cellConfig, cellPlugins })
+ }
+ }
+ }, [contextValue.cellConfig, contextValue.cellPlugins])
+
+ return (
+
+ {children}
+
+ )
+}
+
+export function useTableContext () {
+ return useContext(TableContext)
+}
diff --git a/components/lexical/contexts/toolbar.js b/components/lexical/contexts/toolbar.js
new file mode 100644
index 0000000000..1762ccd5a1
--- /dev/null
+++ b/components/lexical/contexts/toolbar.js
@@ -0,0 +1,53 @@
+import { createContext, useContext, useMemo, useState, useCallback } from 'react'
+
+const INITIAL_STATE = {
+ isBold: false,
+ elementFormat: 'left',
+ isCode: false,
+ isHighlight: false,
+ isImageCaption: false,
+ isItalic: false,
+ isLink: false,
+ isRTL: false,
+ isStrikethrough: false,
+ isSubscript: false,
+ isSuperscript: false,
+ isUnderline: false,
+ isLowercase: false,
+ isUppercase: false,
+ isCapitalize: false,
+ blockType: 'paragraph',
+ codeLanguage: '',
+ markdownMode: 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 (
+
+ {children}
+
+ )
+}
+
+export const useToolbarState = () => {
+ return useContext(ToolbarContext)
+}
diff --git a/components/lexical/editor.js b/components/lexical/editor.js
new file mode 100644
index 0000000000..762e3aad83
--- /dev/null
+++ b/components/lexical/editor.js
@@ -0,0 +1,178 @@
+import { useFormikContext } from 'formik'
+import { configExtension, defineExtension } from 'lexical'
+import { ContentEditable } from '@lexical/react/LexicalContentEditable'
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary'
+import { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer'
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin'
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
+import { useMemo, useState } from 'react'
+import classNames from 'classnames'
+import { useLexicalPreferences } from '@/components/lexical/contexts/preferences'
+import { useSharedHistoryContext, SharedHistoryContextProvider } from '@/components/lexical/contexts/sharedhistory'
+import { TableContextProvider } from '@/components/lexical/contexts/table'
+import { ToolbarContextProvider } from '@/components/lexical/contexts/toolbar'
+import { CodeShikiSNExtension } from '@/lib/lexical/extensions/core/code'
+import { CodeThemePlugin } from '@/components/lexical/plugins/core/code-theme'
+import FileUploadPlugin from '@/components/lexical/plugins/inserts/upload'
+import FloatingToolbarPlugin from '@/components/lexical/plugins/toolbar/floating/floatingtoolbar'
+import LinkEditorPlugin from '@/components/lexical/plugins/inserts/link'
+import MentionsPlugin from '@/components/lexical/plugins/decorative/mention'
+import ModeSwitcherPlugin from '@/components/lexical/plugins/core/mode/switch'
+import { ShortcutsExtension } from '@/lib/lexical/extensions/core/shortcuts'
+import { ToolbarPlugin } from '@/components/lexical/plugins/toolbar'
+import { SNCommandsExtension } from '@/lib/lexical/extensions/core/commands'
+import { $initializeEditorState } from '@/lib/lexical/universal/utils'
+import DefaultNodes from '@/lib/lexical/nodes'
+import SN_TRANSFORMERS from '@/lib/lexical/transformers'
+import styles from './theme/theme.module.css'
+import theme from './theme'
+import { MaxLengthPlugin } from '@/components/lexical/plugins/misc/max-length'
+import TransformerBridgePlugin from '@/components/lexical/plugins/core/transformer-bridge'
+import { MarkdownModeExtension } from '@/lib/lexical/extensions/core/mode'
+import { MediaCheckExtension } from '@/components/lexical/plugins/misc/media-check'
+import LocalDraftPlugin from '@/components/lexical/plugins/core/local-draft'
+import FormikBridgePlugin from '@/components/lexical/plugins/core/formik'
+import { CheckListExtension, ListExtension } from '@lexical/list'
+import { LinkExtension } from '@lexical/link'
+import { TableExtension } from '@lexical/table'
+import { AutoFocusExtension, HorizontalRuleExtension } from '@lexical/extension'
+import { SNAutoLinkExtension } from '@/lib/lexical/extensions/decorative/autolink'
+import PreferencesPlugin from '@/components/lexical/plugins/core/preferences'
+import MediaDragDropPlugin from '@/components/lexical/plugins/content/media/dnd'
+import TableActionMenuPlugin from '@/components/lexical/plugins/inserts/table/action'
+import { TableOfContentsExtension } from '@/lib/lexical/extensions/toc'
+import { SpoilerExtension } from '@/lib/lexical/extensions/formatting/spoiler'
+import CodeActionsPlugin from './plugins/decorative/code-actions'
+
+/**
+ * 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 Editor ({ name, appendValue, autoFocus, topLevel, ...props }) {
+ const { prefs } = useLexicalPreferences()
+ const { values } = useFormikContext()
+
+ const editor = useMemo(() =>
+ defineExtension({
+ $initialEditorState: (editor) => {
+ // append value takes precedence
+ if (appendValue) {
+ return $initializeEditorState(prefs.startInMarkdown, editor, appendValue)
+ }
+ // territory descriptions are always markdown
+ if (values.desc) {
+ return $initializeEditorState(true, editor, values.desc)
+ }
+ // existing lexical state
+ if (values.lexicalState) {
+ try {
+ const state = editor.parseEditorState(values.lexicalState)
+ if (!state.isEmpty()) {
+ editor.setEditorState(state)
+ return
+ }
+ } catch (error) {
+ console.error('failed to load initial state:', error)
+ }
+ }
+
+ // default: initialize based on user preference
+ return $initializeEditorState(prefs.startInMarkdown)
+ },
+ name: 'editor',
+ namespace: 'SN',
+ nodes: DefaultNodes,
+ dependencies: [
+ SNAutoLinkExtension,
+ CodeShikiSNExtension,
+ MarkdownModeExtension,
+ MediaCheckExtension,
+ ShortcutsExtension,
+ ListExtension,
+ CheckListExtension,
+ LinkExtension,
+ TableExtension,
+ SNCommandsExtension,
+ HorizontalRuleExtension,
+ TableOfContentsExtension,
+ SpoilerExtension,
+ configExtension(AutoFocusExtension, { disabled: !autoFocus })
+ ],
+ theme: { ...theme, topLevel: topLevel ? 'topLevel' : '' },
+ onError: (error) => console.error('stacker news editor has encountered an error:', error)
+ }), [autoFocus, topLevel])
+
+ return (
+
+
+
+
+
+
+
+
+ )
+}
+
+/**
+ * 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 { historyState } = useSharedHistoryContext()
+
+ const onRef = (_floatingAnchorElem) => {
+ if (_floatingAnchorElem !== null) {
+ setFloatingAnchorElem(_floatingAnchorElem)
+ }
+ }
+
+ return (
+ <>
+
+ +
+
+
+
+
+ )
+}
diff --git a/components/layout.module.css b/components/layout.module.css
index 798a085d04..f1acdbd69f 100644
--- a/components/layout.module.css
+++ b/components/layout.module.css
@@ -29,4 +29,9 @@
.content form {
width: 100%;
+}
+
+/* special case for post creation, 1:1 width editor-resulting post */
+.content:has(form [contenteditable="true"]) {
+ max-width: 850px !important;
}
\ No newline at end of file
diff --git a/components/lexical/contexts/item.js b/components/lexical/contexts/item.js
new file mode 100644
index 0000000000..11fef4b0bd
--- /dev/null
+++ b/components/lexical/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 (
+
+
+ }
+ ErrorBoundary={LexicalErrorBoundary}
+ />
+
+
+ {placeholder}
}
+ />
+
+
+ {url}
+ } + + if (status === 'error') { + return
+ setIsLoadError(true)}
+ className={isFocused ? `focused ${isInNodeSelection ? 'draggable' : ''}` : null}
+ imageRef={mediaRef}
+ topLevel={topLevel}
+ />
+
+
+ {showCaption && (
+
+
+
+
+ )}
+ {resizable && isInNodeSelection && isFocused && (
+
+ {!showCaption && captionsEnabled && (
+
+ )}
+
{
+ handlePointerDown(event, Direction.north)
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.north | Direction.east)
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.east)
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.south | Direction.east)
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.south)
+ }}
+ />
+
{
+ handlePointerDown(event, Direction.south | Direction.west)
+ }}
+ />
+ setDropdownOpen(isOpen)} show={dropdownOpen}>
+ e.preventDefault()} className={classNames(styles.bottomBarItem, className)}>
+ DEV debug options
+
+
+ setOption('startInMarkdown', !prefs.startInMarkdown)} className={styles.dropdownExtraItem}>
+
+ {prefs.startInMarkdown &&
+ setOption('showToolbar', !prefs.showToolbar)} className={styles.dropdownExtraItem}>
+
+ {prefs.showToolbar &&
+ setOption('showFloatingToolbar', !prefs.showFloatingToolbar)} className={styles.dropdownExtraItem}>
+
+ {prefs.showFloatingToolbar &&
+
+ {
+ editor.read(() => {
+ const json = editor.getEditorState().toJSON()
+ navigator.clipboard.writeText(JSON.stringify(json, null, 2))
+ toaster.success('editor state copied to clipboard')
+ })
+ }}
+ className={styles.dropdownExtraItem}
+ >
+
+ copy editor state JSON
+
+
+
+
+ )
+}
diff --git a/components/lexical/plugins/core/transformer-bridge.js b/components/lexical/plugins/core/transformer-bridge.js
new file mode 100644
index 0000000000..44cdda101e
--- /dev/null
+++ b/components/lexical/plugins/core/transformer-bridge.js
@@ -0,0 +1,76 @@
+import { useEffect } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { createCommand, $selectAll, $getSelection, COMMAND_PRIORITY_EDITOR, $getRoot } from 'lexical'
+import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown'
+import { $findTopLevelElement } from '@/lib/lexical/universal/utils'
+import SN_TRANSFORMERS from '@/lib/lexical/transformers'
+import { $formatBlock } from '@/lib/lexical/universal/commands/formatting/blocks'
+import { CodeHighlighterShikiExtension } from '@lexical/code-shiki'
+import useHeadlessBridge from './use-headless-bridge'
+
+/** command to transform markdown selections using a headless lexical editor
+ * @param {Object} params.selection - selection to transform
+ * @param {string} params.formatType - format type to transform
+ * @param {string} params.transformation - transformation to apply
+ * @returns {boolean} true if transformation was applied
+ */
+export const USE_TRANSFORMER_BRIDGE = createCommand('USE_TRANSFORMER_BRIDGE')
+
+/** bridge plugin that transforms markdown selections using a headless lexical editor,
+ * registers USE_TRANSFORMER_BRIDGE command to transform markdown selections
+ */
+export default function TransformerBridgePlugin () {
+ const [editor] = useLexicalComposerContext()
+ const bridge = useHeadlessBridge({ extensions: [CodeHighlighterShikiExtension] })
+
+ // Markdown Transformer Bridge
+ // uses markdown transformers to apply transformations to a markdown selection
+ useEffect(() => {
+ return editor.registerCommand(USE_TRANSFORMER_BRIDGE, ({ selection, formatType, transformation }) => {
+ if (!selection) selection = $getSelection()
+ // get the markdown from the selection
+ const markdown = selection.getTextContent()
+ console.log('markdown', markdown)
+
+ // new markdown to be inserted in the original editor
+ let newMarkdown = ''
+
+ // update the bridge editor with single update cycle
+ bridge.current.update(() => {
+ // make sure we're working with a clean bridge
+ $getRoot().clear()
+
+ $convertFromMarkdownString(markdown, SN_TRANSFORMERS, undefined, false)
+ $selectAll()
+ const innerSelection = $getSelection()
+
+ switch (formatType) {
+ case 'format':
+ innerSelection.formatText(transformation)
+ break
+ case 'block':
+ $formatBlock(bridge.current, transformation)
+ break
+ case 'elementFormat':
+ innerSelection.getNodes()?.forEach(node => {
+ const element = $findTopLevelElement(node)
+ if (element && element.setFormat) {
+ element.setFormat(transformation || 'left')
+ }
+ })
+ break
+ }
+
+ newMarkdown = $convertToMarkdownString(SN_TRANSFORMERS, undefined, false)
+ // we're done, clear the bridge
+ $getRoot().clear()
+ })
+
+ // insert the new markdown in the original editor
+ selection.insertText(newMarkdown)
+ return true
+ }, COMMAND_PRIORITY_EDITOR)
+ }, [editor, bridge])
+
+ return null
+}
diff --git a/components/lexical/plugins/core/use-headless-bridge.js b/components/lexical/plugins/core/use-headless-bridge.js
new file mode 100644
index 0000000000..67fe5ea05b
--- /dev/null
+++ b/components/lexical/plugins/core/use-headless-bridge.js
@@ -0,0 +1,58 @@
+import { useRef, useCallback, useEffect } from 'react'
+import { buildEditorFromExtensions, defineExtension } from '@lexical/extension'
+import { RichTextExtension } from '@lexical/rich-text'
+import { ListExtension, CheckListExtension } from '@lexical/list'
+import DefaultNodes from '@/lib/lexical/nodes'
+import DefaultTheme from '@/components/lexical/theme'
+
+/**
+ * shared hook that creates and manages a headless bridge editor
+ * @param {Object} [opts] - optional configuration for the bridge editor
+ * @param {Array} [opts.nodes] - custom nodes to use (defaults to DefaultNodes)
+ * @param {Object} [opts.theme] - theme configuration (defaults to DefaultTheme)
+ * @param {Array} [opts.extensions] - additional extensions to use (defaults to [])
+ * @param {string} [opts.name] - name of the bridge editor (defaults to 'sn-headless-bridge')
+ * @returns {React.RefObject} ref to the bridge editor instance
+ */
+export default function useHeadlessBridge (opts = {}) {
+ const {
+ nodes = DefaultNodes,
+ theme = DefaultTheme,
+ extensions = [],
+ name = 'sn-headless-bridge'
+ } = opts
+ const bridge = useRef(null)
+
+ // creates or returns existing headless bridge editor
+ const createBridge = useCallback(() => {
+ if (bridge.current) return bridge.current
+ bridge.current = buildEditorFromExtensions(
+ defineExtension({
+ onError: (error) => console.error('editor bridge has encountered an error:', error),
+ name,
+ dependencies: [
+ RichTextExtension,
+ ListExtension,
+ CheckListExtension,
+ ...extensions
+ ],
+ nodes,
+ theme
+ })
+ )
+ return bridge.current
+ }, [nodes, theme, extensions])
+
+ // create the bridge if it doesn't exist and dispose of it when we're done
+ useEffect(() => {
+ createBridge()
+ return () => {
+ if (bridge.current) {
+ bridge.current.dispose()
+ bridge.current = null
+ }
+ }
+ }, [createBridge])
+
+ return bridge
+}
diff --git a/components/lexical/plugins/decorative/code-actions.js b/components/lexical/plugins/decorative/code-actions.js
new file mode 100644
index 0000000000..45c6d1d2c4
--- /dev/null
+++ b/components/lexical/plugins/decorative/code-actions.js
@@ -0,0 +1,221 @@
+// TODO: inspired from lexical playground
+import {
+ $isCodeNode,
+ CodeNode,
+ getLanguageFriendlyName
+} from '@lexical/code'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $getNearestNodeFromDOMNode, isHTMLElement } from 'lexical'
+import { useEffect, useRef, useState, useCallback, useMemo } from 'react'
+import { createPortal } from 'react-dom'
+import styles from '../../theme/theme.module.css'
+import { CopyButton } from '@/components/form'
+import ActionTooltip from '@/components/action-tooltip'
+import Dropdown from 'react-bootstrap/Dropdown'
+import classNames from 'classnames'
+import ArrowDownIcon from '@/svgs/arrow-down-s-line.svg'
+import { getCodeLanguageOptions } from '@lexical/code-shiki'
+import { useLexicalEditable } from '@lexical/react/useLexicalEditable'
+
+function getMouseInfo (event) {
+ const target = event.target
+
+ if (isHTMLElement(target)) {
+ const codeDOMNode = target.closest('code.sn__codeBlock')
+ const isOutside = !(
+ codeDOMNode || target.closest(`div.${styles.codeActionMenuContainer}`)
+ )
+
+ return { codeDOMNode, isOutside }
+ } else {
+ return { codeDOMNode: null, isOutside: true }
+ }
+}
+
+function CodeLanguageDropdown ({ langs, selectedLang, className, setLang }) {
+ const [dropdownOpen, setDropdownOpen] = useState(false)
+ const [searchTerm, setSearchTerm] = useState('')
+
+ const filteredOptions = searchTerm
+ ? langs.filter(([value, name]) =>
+ value.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ name.toLowerCase().includes(searchTerm.toLowerCase())
+ )
+ : langs.filter(([value]) => ['python', 'java', 'javascript', 'cpp', 'go'].includes(value))
+
+ return (
+ language options {selectedLang}} placement='top' noWrapper showDelay={500} transition disable={dropdownOpen}>
+ setDropdownOpen(isOpen)} show={dropdownOpen}>
+ e.preventDefault()} className={className}>
+ {selectedLang}
+
+
+ setLang(value)}
+ className={classNames(styles.dropdownExtraItem, selectedLang === value ? styles.active : '')}
+ onPointerDown={e => e.preventDefault()}
+ >
+
+ {name}
+
+
+ ))}
+
+
+
+ )
+}
+
+// TODO: in editable mode, the dropdown should always be shown
+// the problem is that we're basing this off mouse events
+// instead we should use a mutation listener to detect when the code node is created or destroyed
+// and then show the dropdown if the code node is created
+// and hide the dropdown if the code node is destroyed
+// this way we can always have the dropdown showing in editable mode
+function CodeActionMenuContainer ({ anchorElem }) {
+ const [editor] = useLexicalComposerContext()
+ const isEditable = useLexicalEditable()
+ const [lang, setLang] = useState('')
+ const [isShown, setShown] = useState(false)
+ const [shouldListenMouseMove, setShouldListenMouseMove] = useState(false)
+ const [position, setPosition] = useState({
+ right: '0',
+ top: '0'
+ })
+ const codeBlocks = useRef(new Set())
+ const codeDOMNodeRef = useRef(null)
+ const langs = useMemo(() => getCodeLanguageOptions(), [])
+
+ const getCodeValue = useCallback(() => {
+ let content = ''
+ editor.update(() => {
+ const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNodeRef.current)
+ if ($isCodeNode(maybeCodeNode)) {
+ content = maybeCodeNode.getTextContent()
+ }
+ })
+ return content
+ }, [editor, codeDOMNodeRef])
+
+ const updateLanguage = useCallback((newLang) => {
+ setLang(newLang)
+ editor.update(() => {
+ const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNodeRef.current)
+ if ($isCodeNode(maybeCodeNode)) {
+ maybeCodeNode.setLanguage(newLang)
+ }
+ })
+ }, [editor])
+
+ const onMouseMove = (event) => {
+ const { codeDOMNode, isOutside } = getMouseInfo(event)
+ if (isOutside) {
+ setShown(false)
+ return
+ }
+
+ if (!codeDOMNode) {
+ return
+ }
+
+ codeDOMNodeRef.current = codeDOMNode
+
+ let codeNode = null
+ let _lang = ''
+
+ editor.update(() => {
+ const maybeCodeNode = $getNearestNodeFromDOMNode(codeDOMNode)
+
+ if ($isCodeNode(maybeCodeNode)) {
+ codeNode = maybeCodeNode
+ _lang = codeNode.getLanguage() || ''
+ }
+ })
+
+ if (codeNode) {
+ const {
+ y: editorElemY,
+ right: editorElemRight
+ } = anchorElem.getBoundingClientRect()
+ const { y, right } = codeDOMNode.getBoundingClientRect()
+ setLang(_lang)
+ setShown(true)
+ setPosition({
+ right: `${editorElemRight - right + 8}px`,
+ top: `${y - editorElemY}px`
+ })
+ }
+ }
+
+ useEffect(() => {
+ if (!shouldListenMouseMove) return
+
+ document.addEventListener('mousemove', onMouseMove)
+ return () => {
+ document.removeEventListener('mousemove', onMouseMove)
+ }
+ }, [onMouseMove, shouldListenMouseMove])
+
+ useEffect(() => {
+ return editor.registerMutationListener(
+ CodeNode,
+ mutations => {
+ editor.getEditorState().read(() => {
+ for (const [key, type] of mutations) {
+ switch (type) {
+ case 'created':
+ codeBlocks.current.add(key)
+ break
+
+ case 'destroyed':
+ codeBlocks.current.delete(key)
+ setShown(false)
+ break
+
+ default:
+ break
+ }
+ }
+ })
+ setShouldListenMouseMove(codeBlocks.current.size > 0)
+ },
+ { skipInitialization: false }
+ )
+ }, [editor])
+
+ const codeFriendlyName = getLanguageFriendlyName(lang)
+
+ return isShown && (
+ <>
+
+ {children}
+
+ )
+}
+
+export default function MentionsPlugin () {
+ const [editor] = useLexicalComposerContext()
+ const { entityData, handleSelect } = useUniversalAutocomplete({ editor })
+ const keyDownHandlerRef = useRef()
+ const resetSuggestionsRef = useRef()
+ const [currentSuggestions, setCurrentSuggestions] = useState([])
+
+ // we receive the name from BaseSuggest
+ // then we find the full item from our stored suggestions
+ const handleItemSelect = useCallback((name) => {
+ const fullItem = currentSuggestions.find(item => item.name === name)
+ console.log('fullItem', fullItem)
+ if (fullItem) {
+ handleSelect(fullItem, entityData?.isUser)
+ }
+ }, [handleSelect, entityData, currentSuggestions])
+
+ // clear suggestions when entity data is null
+ useEffect(() => {
+ if (!entityData) {
+ if (resetSuggestionsRef.current) {
+ resetSuggestionsRef.current()
+ }
+ setCurrentSuggestions([])
+ }
+ }, [entityData])
+
+ useEffect(() => {
+ return editor.registerCommand(
+ KEY_DOWN_COMMAND,
+ (event) => {
+ if (keyDownHandlerRef.current && entityData) {
+ keyDownHandlerRef.current(event)
+ return true
+ }
+ return false
+ },
+ COMMAND_PRIORITY_HIGH
+ )
+ }, [editor, entityData, keyDownHandlerRef])
+
+ if (!entityData) return null
+
+ return createPortal(
+
+ {({ onKeyDown, resetSuggestions }) => {
+ keyDownHandlerRef.current = onKeyDown
+ resetSuggestionsRef.current = resetSuggestions
+ return null
+ }}
+ , document.body)
+}
diff --git a/components/lexical/plugins/decorative/toc.js b/components/lexical/plugins/decorative/toc.js
new file mode 100644
index 0000000000..0cdd8b537e
--- /dev/null
+++ b/components/lexical/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 (
+
+
+ {item.text}
+
+ {hasChildren && (
+
+ )
+}
+
+/**
+ * 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 (
+
{
+ handlePointerDown(event, Direction.west)
+ }}
+ />
+
+
+
+ }
+ targetLineComponent={
+
+ }
+ isOnMenu={isOnMenu}
+ onElementChanged={setDraggableElement}
+ />
+ )
+}
diff --git a/components/lexical/plugins/core/formik.js b/components/lexical/plugins/core/formik.js
new file mode 100644
index 0000000000..6f333bc2cb
--- /dev/null
+++ b/components/lexical/plugins/core/formik.js
@@ -0,0 +1,83 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useEffect, useRef } from 'react'
+import { useField } from 'formik'
+import { $initializeEditorState, $isMarkdownMode, $isRootEmpty } from '@/lib/lexical/universal/utils'
+import { $convertFromMarkdownString, $convertToMarkdownString } from '@lexical/markdown'
+import SN_TRANSFORMERS from '@/lib/lexical/transformers'
+import { $getRoot } from 'lexical'
+import useHeadlessBridge from './use-headless-bridge'
+import { MediaCheckExtension } from '@/components/lexical/plugins/misc/media-check'
+
+/**
+ * converts markdown to lexical state using a temporary bridge editor
+ * @param {React.RefObject} bridge - headless editor instance
+ * @param {string} markdown - markdown string to convert
+ * @returns {string} serialized lexical state as JSON
+ */
+function $prepareMarkdown (bridge, markdown) {
+ let lexicalState = ''
+
+ try {
+ // convert the markdown to a lexical state
+ bridge.current.update(() => {
+ $convertFromMarkdownString(markdown, SN_TRANSFORMERS, undefined, false)
+ })
+
+ bridge.current.read(() => {
+ lexicalState = bridge.current.getEditorState().toJSON()
+ })
+ } catch (error) {
+ console.error('cannot prepare markdown using bridge:', error)
+ }
+
+ return lexicalState
+}
+
+/** syncs lexical editor state with formik form field values */
+export default function FormikBridgePlugin () {
+ const [editor] = useLexicalComposerContext()
+ const bridge = useHeadlessBridge({ extensions: [MediaCheckExtension] })
+ const [lexicalField,, lexicalHelpers] = useField({ name: 'lexicalState' })
+ const hadContent = useRef(false)
+
+ // keep formik in sync, so it doesn't yell at us
+ useEffect(() => {
+ return editor.registerUpdateListener(({ editorState }) => {
+ editorState.read(() => {
+ const isMarkdownMode = $isMarkdownMode()
+
+ // if editor is empty, set empty string for formik validation
+ if ($isRootEmpty()) {
+ lexicalHelpers.setValue('')
+ return
+ }
+
+ let markdown = ''
+ let lexicalState = editorState.toJSON()
+
+ if (isMarkdownMode) {
+ markdown = $getRoot().getFirstChild()?.getTextContent() || ''
+ lexicalState = $prepareMarkdown(bridge, markdown)
+ } else {
+ markdown = $convertToMarkdownString(SN_TRANSFORMERS, undefined, false)
+ }
+
+ lexicalHelpers.setValue(JSON.stringify(lexicalState))
+ })
+ })
+ }, [editor, lexicalHelpers, bridge])
+
+ // reset the editor state if the field is/goes empty
+ useEffect(() => {
+ if (lexicalField.value !== '') {
+ hadContent.current = true
+ }
+
+ if (lexicalField.value === '' && hadContent.current) {
+ hadContent.current = false
+ editor.update(() => $initializeEditorState($isMarkdownMode()))
+ }
+ }, [editor, lexicalField.value])
+
+ return null
+}
diff --git a/components/lexical/plugins/core/local-draft.js b/components/lexical/plugins/core/local-draft.js
new file mode 100644
index 0000000000..5c1a300f0c
--- /dev/null
+++ b/components/lexical/plugins/core/local-draft.js
@@ -0,0 +1,66 @@
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useContext, useCallback, useEffect } from 'react'
+import { StorageKeyPrefixContext } from '@/components/form'
+import { $isRootEmpty, $initializeEditorState } from '@/lib/lexical/universal/utils'
+
+/**
+ * plugin that auto-saves and restores editor drafts to/from local storage
+
+ * @param {string} props.name - storage key suffix for the draft
+ */
+export default function LocalDraftPlugin ({ name }) {
+ const [editor] = useLexicalComposerContext()
+
+ // local storage keys, e.g. 'reply-123456-text'
+ const storageKeyPrefix = useContext(StorageKeyPrefixContext)
+ const storageKey = storageKeyPrefix ? storageKeyPrefix + '-' + name : undefined
+
+ /**
+ * saves or removes draft from local storage based on editor emptiness
+ * @param {Object} lexicalState - serialized lexical editor state
+ */
+ const upsertDraft = useCallback((lexicalState) => {
+ if (!storageKey) return
+
+ // if the editor is empty, remove the draft
+ if ($isRootEmpty()) {
+ window.localStorage.removeItem(storageKey)
+ } else {
+ window.localStorage.setItem(storageKey, JSON.stringify(lexicalState))
+ }
+ }, [storageKey])
+
+ // load the draft from local storage
+ useEffect(() => {
+ if (storageKey) {
+ const value = window.localStorage.getItem(storageKey)
+ if (value) {
+ editor.update(() => {
+ // MIGRATION: if the value is not JSON, let's assume it's markdown and convert it to JSON
+ // it's not part of the try catch parse because we don't want to mistakenly paste JSON into the editor
+ if (!value.startsWith('{')) $initializeEditorState(true, editor, value)
+ try {
+ const state = editor.parseEditorState(value)
+ if (!state.isEmpty()) {
+ editor.setEditorState(state)
+ }
+ } catch (error) {
+ console.error('error parsing editor state:', error)
+ }
+ })
+ }
+ }
+ }, [editor, storageKey])
+
+ // save the draft to local storage
+ useEffect(() => {
+ // whenever the editor state changes, save the draft
+ return editor.registerUpdateListener(({ editorState }) => {
+ editorState.read(() => {
+ upsertDraft(editorState.toJSON())
+ })
+ })
+ }, [editor, upsertDraft])
+
+ return null
+}
diff --git a/components/lexical/plugins/core/mode/switch.js b/components/lexical/plugins/core/mode/switch.js
new file mode 100644
index 0000000000..d78e2d2970
--- /dev/null
+++ b/components/lexical/plugins/core/mode/switch.js
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { getShortcutCombo } from '../../../../../lib/lexical/extensions/core/shortcuts/keyboard'
+import { SN_TOGGLE_MODE_COMMAND } from '@/lib/lexical/extensions/core/mode'
+import styles from '@/components/lexical/theme/theme.module.css'
+import { $isMarkdownMode } from '@/lib/lexical/universal/utils'
+import classNames from 'classnames'
+
+/** displays and toggles between markdown and rich text modes */
+export default function ModeSwitcherPlugin ({ className }) {
+ const [editor] = useLexicalComposerContext()
+ const [isMD, setIsMD] = useState(false)
+
+ useEffect(() => {
+ return editor.registerUpdateListener(({ editorState }) => {
+ editorState.read(() => {
+ setIsMD($isMarkdownMode())
+ })
+ })
+ }, [editor])
+
+ const modeText = isMD ? 'markdown mode' : 'rich mode'
+ const title = `${modeText} ${getShortcutCombo('toggleMode')}`
+
+ return (
+ editor.dispatchCommand(SN_TOGGLE_MODE_COMMAND)}
+ className={classNames(styles.bottomBarItem, className)}
+ title={title}
+ >
+ {modeText}
+
+ )
+}
diff --git a/components/lexical/plugins/core/preferences/index.js b/components/lexical/plugins/core/preferences/index.js
new file mode 100644
index 0000000000..75db53ee02
--- /dev/null
+++ b/components/lexical/plugins/core/preferences/index.js
@@ -0,0 +1,60 @@
+import Dropdown from 'react-bootstrap/Dropdown'
+import CheckIcon from '@/svgs/check-line.svg'
+import styles from '@/components/lexical/theme/theme.module.css'
+import { useLexicalPreferences } from '@/components/lexical/contexts/preferences'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { useToast } from '@/components/toast'
+import { useState } from 'react'
+import classNames from 'classnames'
+import { MenuAlternateDimension } from '@/components/lexical/plugins/toolbar/formatting'
+
+/** DEV: dropdown menu for toggling editor preferences and debug options */
+export default function PreferencesPlugin ({ className }) {
+ const [dropdownOpen, setDropdownOpen] = useState(false)
+ const toaster = useToast()
+ const [editor] = useLexicalComposerContext()
+ const { prefs, setOption } = useLexicalPreferences()
+
+ return (
+ {
+ handlePointerDown(event, Direction.north | Direction.west)
+ }}
+ />
+
+ )
+}
diff --git a/components/lexical/plugins/core/code-theme.js b/components/lexical/plugins/core/code-theme.js
new file mode 100644
index 0000000000..cd4d8ebd2f
--- /dev/null
+++ b/components/lexical/plugins/core/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
+}
diff --git a/components/lexical/plugins/core/draggable-block.js b/components/lexical/plugins/core/draggable-block.js
new file mode 100644
index 0000000000..9bb81ffeb1
--- /dev/null
+++ b/components/lexical/plugins/core/draggable-block.js
@@ -0,0 +1,74 @@
+import { useRef, useState } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $getNearestNodeFromDOMNode, $createParagraphNode } from 'lexical'
+import styles from '@/components/lexical/theme/theme.module.css'
+import DraggableIcon from '@/svgs/lexical/draggable.svg'
+import { DraggableBlockPlugin_EXPERIMENTAL as LexicalDraggableBlockPlugin } from '@lexical/react/LexicalDraggableBlockPlugin'
+import AddIcon from '@/svgs/add-fill.svg'
+
+/**
+ * checks if element is within the draggable block menu
+ * @param {HTMLElement} element - dom element to check
+ * @returns {boolean} true if element is in menu
+ */
+function isOnMenu (element) {
+ return !!element.closest(`.${styles.draggableBlockMenu}`)
+}
+
+/**
+ * plugin that enables drag-and-drop reordering of editor blocks
+
+ * @param {HTMLElement} props.anchorElem - anchor element for positioning the drag menu
+ * @returns {JSX.Element|null} draggable block plugin component or null
+ */
+export default function DraggableBlockPlugin ({ anchorElem }) {
+ const [editor] = useLexicalComposerContext()
+ const menuRef = useRef(null)
+ const targetLineRef = useRef(null)
+ const [draggableElement, setDraggableElement] = useState(null)
+
+ /**
+ * inserts a new paragraph block before or after the draggable element
+ * @param {Event} e - click event (modifier keys control position)
+ */
+ function insertBlock (e) {
+ if (!draggableElement || !editor) return
+
+ editor.update(() => {
+ const node = $getNearestNodeFromDOMNode(draggableElement)
+ if (!node) return
+
+ const pNode = $createParagraphNode()
+ if (e.altKey || e.ctrlKey || e.metaKey) {
+ node.insertBefore(pNode)
+ } else {
+ node.insertAfter(pNode)
+ }
+
+ pNode.select()
+ })
+ }
+
+ if (!anchorElem) return null
+
+ return (
+ +
+ setSearchTerm(e.target.value)}
+ className={styles.dropdownSearchInput}
+ />
+
+ {filteredOptions.map(([value, name]) => (
+
+ {isEditable
+ ?
+
+ )
+}
+
+export default function CodeActionsPlugin ({ anchorElem = document.body }) {
+ if (!anchorElem) return null
+ return createPortal(
+ {codeFriendlyName}
}
+
+ getCodeValue()} />
+
+ -
+ {item.children.map((child, idx) => (
+
+
+ )
+}
diff --git a/components/lexical/plugins/formatting/math/editor.js b/components/lexical/plugins/formatting/math/editor.js
new file mode 100644
index 0000000000..ffd144bf4b
--- /dev/null
+++ b/components/lexical/plugins/formatting/math/editor.js
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react'
+import { isHTMLElement } from '@lexical/utils'
+
+export default forwardRef(function MathEditor ({ math, setMath, inline }, ref) {
+ const onChange = (e) => {
+ setMath(e.target.value)
+ }
+
+ return inline && isHTMLElement(ref)
+ ? (
+ table of contents
+ {tocItems.length > 0 + ? ( +-
+ {tocItems.map((item, index) => (
+
no headings
}
+
+