diff --git a/components/text.js b/components/text.js
index f4e7397b2c..3fe686d287 100644
--- a/components/text.js
+++ b/components/text.js
@@ -21,6 +21,7 @@ import remarkUnicode from '@/lib/remark-unicode'
import Embed from './embed'
import remarkMath from 'remark-math'
import remarkToc from '@/lib/remark-toc'
+import { SNReader } from './editor'
const rehypeSNStyled = () => rehypeSN({
stylers: [{
@@ -52,8 +53,89 @@ export function SearchText ({ text }) {
)
}
+export function useOverflow ({ element, truncated = false }) {
+ // would the text overflow on the current screen size?
+ const [overflowing, setOverflowing] = useState(false)
+ // should we show the full text?
+ const [show, setShow] = useState(false)
+ const showOverflow = useCallback(() => setShow(true), [setShow])
+
+ // clip item and give it a`show full text` button if we are overflowing
+ useEffect(() => {
+ if (!element) return
+
+ const node = 'current' in element ? element.current : element
+ if (!node || !(node instanceof window.Element)) return
+
+ function checkOverflow () {
+ setOverflowing(
+ truncated
+ ? node.scrollHeight > window.innerHeight * 0.5
+ : node.scrollHeight > window.innerHeight * 2
+ )
+ }
+
+ let resizeObserver
+ if ('ResizeObserver' in window) {
+ resizeObserver = new window.ResizeObserver(checkOverflow)
+ resizeObserver.observe(node)
+ }
+
+ window.addEventListener('resize', checkOverflow)
+ checkOverflow()
+ return () => {
+ window.removeEventListener('resize', checkOverflow)
+ resizeObserver?.disconnect()
+ }
+ }, [element, setOverflowing])
+
+ const Overflow = useMemo(() => {
+ if (overflowing && !show) {
+ return (
+
+ )
+ }
+ return null
+ }, [showOverflow, overflowing, show, setShow])
+
+ return { overflowing, show, setShow, Overflow }
+}
+
+// TODO: revisit
+export default function Text ({ topLevel, children, ...props }) {
+ const [element, setElement] = useState(null)
+ const { overflowing, show, Overflow } = useOverflow({ element, truncated: !!children })
+
+ const textClassNames = useMemo(() => {
+ return classNames(
+ 'sn-text',
+ topLevel && 'sn-text--top-level',
+ show ? 'sn-text--uncontained' : overflowing && 'sn-text--contained'
+ )
+ }, [topLevel, show, overflowing])
+
+ return (
+
+ {Overflow}
+
+ )
+}
+
// this is one of the slowest components to render
-export default memo(function Text ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, children, tab, itemId, outlawed, topLevel }) {
+export const LegacyText = memo(function LegacyText ({ rel = UNKNOWN_LINK_REL, imgproxyUrls, children, tab, itemId, outlawed, topLevel }) {
// include remarkToc if topLevel
const remarkPlugins = topLevel ? [...baseRemarkPlugins, remarkToc] : baseRemarkPlugins
diff --git a/fragments/comments.js b/fragments/comments.js
index 72f19a9ce4..135e222192 100644
--- a/fragments/comments.js
+++ b/fragments/comments.js
@@ -20,6 +20,8 @@ export const COMMENT_FIELDS = gql`
createdAt
deletedAt
text
+ lexicalState
+ html
user {
id
name
@@ -73,6 +75,8 @@ export const COMMENT_FIELDS_NO_CHILD_COMMENTS = gql`
createdAt
deletedAt
text
+ lexicalState
+ html
user {
id
name
@@ -119,6 +123,8 @@ export const COMMENTS_ITEM_EXT_FIELDS = gql`
${STREAK_FIELDS}
fragment CommentItemExtFields on Item {
text
+ lexicalState
+ html
root {
id
title
diff --git a/fragments/items.js b/fragments/items.js
index a687ee119a..7eebec64ff 100644
--- a/fragments/items.js
+++ b/fragments/items.js
@@ -94,6 +94,8 @@ export const ITEM_FULL_FIELDS = gql`
fragment ItemFullFields on Item {
...ItemFields
text
+ lexicalState
+ html
root {
id
createdAt
diff --git a/lib/dompurify.js b/lib/dompurify.js
new file mode 100644
index 0000000000..6fa7242c75
--- /dev/null
+++ b/lib/dompurify.js
@@ -0,0 +1,69 @@
+/**
+ * creates a fake DOM using LinkeDOM for server-side rendering
+ * @param {string} html - HTML content to parse
+ * @returns {Object} parsed HTML object with window and document
+ */
+export function createLinkeDOM (html) {
+ const { parseHTML } = require('linkedom')
+ return parseHTML(html || '')
+}
+
+/**
+ * returns DOMPurify instance for either browser or server environment
+ * @param {Object} [domWindow] - optional DOM window object (for server-side)
+ * @returns {Object} DOMPurify instance
+ */
+export function getDOMPurify (domWindow) {
+ const DOMPurify = require('dompurify')
+
+ if (typeof window === 'undefined') {
+ if (domWindow) {
+ return DOMPurify(domWindow)
+ }
+ const { window } = createLinkeDOM()
+ return DOMPurify(window)
+ }
+
+ return DOMPurify
+}
+
+/**
+ * sanitizes HTML using DOMPurify with optional custom DOM window
+ * @param {string} html - HTML content to sanitize
+ * @param {Object} [domWindow] - optional DOM window object
+ * @returns {string} sanitized HTML string
+ */
+export function sanitizeHTML (html, domWindow) {
+ return getDOMPurify(domWindow).sanitize(html)
+}
+
+/**
+ * parses and sanitizes HTML, returning a document object
+ * @param {string} html - HTML content to parse and sanitize
+ * @returns {Document} parsed and sanitized document object
+ */
+export function getParsedHTML (html) {
+ if (typeof window === 'undefined') {
+ const normalizedHTML = !html.toLowerCase().startsWith('')
+ ? `
+
+
+ ${html}
+
+ `
+ : html
+ const parsed = createLinkeDOM(normalizedHTML)
+ const domWindow = parsed.window
+
+ // sanitize
+ const sanitizedHTML = getDOMPurify(domWindow).sanitize(html)
+
+ // update the body with sanitized content
+ parsed.document.body.innerHTML = sanitizedHTML
+ return parsed.document
+ }
+
+ // client-side
+ const sanitizedHTML = sanitizeHTML(html)
+ return new window.DOMParser().parseFromString(sanitizedHTML, 'text/html')
+}
diff --git a/lib/lexical/exts/md-commands.js b/lib/lexical/exts/md-commands.js
new file mode 100644
index 0000000000..158ba47dd1
--- /dev/null
+++ b/lib/lexical/exts/md-commands.js
@@ -0,0 +1,68 @@
+import { createCommand, defineExtension, COMMAND_PRIORITY_HIGH, $getSelection, $isRangeSelection } from 'lexical'
+import { mergeRegister } from '@lexical/utils'
+
+export const MD_INSERT_LINK_COMMAND = createCommand('MD_INSERT_LINK_COMMAND')
+export const MD_INSERT_BOLD_COMMAND = createCommand('MD_INSERT_BOLD_COMMAND')
+export const MD_INSERT_ITALIC_COMMAND = createCommand('MD_INSERT_ITALIC_COMMAND')
+
+function wrapMarkdownSelection (editor, prefix, suffix = prefix, cursorOffset = suffix.length) {
+ editor.update(() => {
+ const selection = $getSelection()
+ if (!$isRangeSelection(selection)) return
+
+ const selectedText = selection.getTextContent()
+
+ // wrap the selected text with the prefix and suffix
+ selection.insertText(`${prefix}${selectedText}${suffix}`)
+
+ // position the cursor using the specified offset
+ const newSelection = $getSelection()
+ if ($isRangeSelection(newSelection)) {
+ const anchor = newSelection.anchor
+ const newOffset = anchor.offset - cursorOffset
+ anchor.set(anchor.key, newOffset, anchor.type)
+ newSelection.focus.set(anchor.key, newOffset, anchor.type)
+ }
+ })
+}
+
+// bold
+function handleMDInsertBoldCommand (editor) {
+ wrapMarkdownSelection(editor, '**')
+ return true
+}
+
+// italic
+function handleMDInsertItalicCommand (editor) {
+ wrapMarkdownSelection(editor, '*')
+ return true
+}
+
+// link
+function handleMDInsertLinkCommand (editor) {
+ wrapMarkdownSelection(editor, '[', ']()', 1)
+ return true
+}
+
+export const MDCommandsExtension = defineExtension({
+ name: 'MDCommandsExtension',
+ register: (editor) => {
+ return mergeRegister(
+ editor.registerCommand(
+ MD_INSERT_LINK_COMMAND,
+ handleMDInsertLinkCommand,
+ COMMAND_PRIORITY_HIGH
+ ),
+ editor.registerCommand(
+ MD_INSERT_BOLD_COMMAND,
+ handleMDInsertBoldCommand,
+ COMMAND_PRIORITY_HIGH
+ ),
+ editor.registerCommand(
+ MD_INSERT_ITALIC_COMMAND,
+ handleMDInsertItalicCommand,
+ COMMAND_PRIORITY_HIGH
+ )
+ )
+ }
+})
diff --git a/lib/lexical/exts/media-check.js b/lib/lexical/exts/media-check.js
new file mode 100644
index 0000000000..c758074296
--- /dev/null
+++ b/lib/lexical/exts/media-check.js
@@ -0,0 +1,163 @@
+import { createCommand, defineExtension, COMMAND_PRIORITY_EDITOR, $getNodeByKey, $createTextNode } from 'lexical'
+import { $createLinkNode } from '@lexical/link'
+import { mergeRegister } from '@lexical/utils'
+import { MediaNode } from '@/lib/lexical/nodes/content/media'
+import { PUBLIC_MEDIA_CHECK_URL, UNKNOWN_LINK_REL } from '@/lib/constants'
+import { fetchWithTimeout } from '@/lib/fetch'
+
+export const MEDIA_CHECK_COMMAND = createCommand('MEDIA_CHECK_COMMAND')
+
+export const MediaCheckExtension = defineExtension({
+ name: 'MediaCheckExtension',
+ register: (editor) => {
+ const aborters = new Map()
+ const tokens = new Map()
+ const promises = new Map()
+
+ // replaces a media node with a link node
+ const replaceMediaWithLink = (node) => {
+ const url = node.getSrc()
+ const link = $createLinkNode(url, { target: '_blank', rel: UNKNOWN_LINK_REL })
+ link.append($createTextNode(url))
+ node.replace(link)
+ }
+
+ // checks media type and updates node accordingly
+ const checkMediaNode = (nodeKey, url) => {
+ if (promises.has(nodeKey)) {
+ return promises.get(nodeKey)
+ }
+
+ const prev = aborters.get(nodeKey)
+ if (prev) prev.abort()
+
+ const token = (tokens.get(nodeKey) ?? 0) + 1
+ tokens.set(nodeKey, token)
+
+ // set node status to pending while checking
+ editor.update(() => {
+ const node = $getNodeByKey(nodeKey)
+ if (node instanceof MediaNode) node.setStatus('pending')
+ }, { tag: 'history-merge' })
+
+ // create new abort controller for this request
+ const controller = new AbortController()
+ aborters.set(nodeKey, controller)
+
+ const promise = checkMedia(PUBLIC_MEDIA_CHECK_URL, url, { signal: controller.signal })
+ .then((result) => {
+ if (tokens.get(nodeKey) !== token) return
+
+ editor.update(() => {
+ const node = $getNodeByKey(nodeKey)
+ if (!(node instanceof MediaNode)) return
+
+ if (result.type === 'unknown') {
+ replaceMediaWithLink(node)
+ } else {
+ node.applyCheckResult(result.type)
+ }
+ }, { tag: 'history-merge' })
+ return result
+ })
+ .catch((error) => {
+ console.error('media check failed:', error)
+ if (tokens.get(nodeKey) !== token) throw error
+
+ editor.update(() => {
+ const node = $getNodeByKey(nodeKey)
+ if (node instanceof MediaNode) {
+ node.setStatus('error')
+ replaceMediaWithLink(node)
+ }
+ }, { tag: 'history-merge' })
+ })
+ .finally(() => {
+ if (aborters.get(nodeKey) === controller) aborters.delete(nodeKey)
+ promises.delete(nodeKey)
+ })
+
+ promises.set(nodeKey, promise)
+ return promise
+ }
+
+ const unregisterTransforms = mergeRegister(
+ // register command to check media type for a given node
+ editor.registerCommand(MEDIA_CHECK_COMMAND, ({ nodeKey, url }) => {
+ checkMediaNode(nodeKey, url)
+ return true
+ }, COMMAND_PRIORITY_EDITOR),
+ // register transform to automatically check unknown media nodes
+ editor.registerNodeTransform(MediaNode, (node) => {
+ // trigger media check for unknown media nodes that are idle and have a source
+ if (node.getKind() === 'unknown' && node.getStatus() === 'idle' && node.getSrc()) {
+ editor.dispatchCommand(MEDIA_CHECK_COMMAND, { nodeKey: node.getKey(), url: node.getSrc() })
+ }
+ })
+ )
+
+ return () => {
+ unregisterTransforms()
+ aborters.forEach((controller) => controller.abort())
+ aborters.clear()
+ tokens.clear()
+ promises.clear()
+ }
+ }
+})
+
+/**
+ * checks if a URL points to video or image by calling media check endpoint
+ * @param {string} endpoint - media check endpoint URL
+ * @param {string} url - URL to check
+ * @param {Object} [options] - options object
+ * @param {AbortSignal} [options.signal] - abort signal for request cancellation
+ * @returns {Promise
+
+