Rich and Markdown Text Editor

.env.development

@@ -116,6 +116,10 @@ NEXT_PUBLIC_EXTRA_LONG_POLL_INTERVAL_MS=300000
 IMGPROXY_URL_DOCKER=http://imgproxy:8080
 MEDIA_URL_DOCKER=http://s3:4566/uploads
 
+# media check with capture container
+MEDIA_CHECK_URL_DOCKER=http://capture:5678/media
+NEXT_PUBLIC_MEDIA_CHECK_URL=http://localhost:5678/media
+
 # postgres container stuff
 POSTGRES_PASSWORD=password
 POSTGRES_USER=sn

.env.production

@@ -7,6 +7,7 @@ NEXTAUTH_URL=https://stacker.news
 NEXTAUTH_URL_INTERNAL=http://127.0.0.1:8080/api/auth
 NEXT_PUBLIC_AWS_UPLOAD_BUCKET=snuploads
 NEXT_PUBLIC_IMGPROXY_URL=https://imgprxy.stacker.news/
+NEXT_PUBLIC_MEDIA_CHECK_URL=https://capture.stacker.news/media
 NEXT_PUBLIC_MEDIA_DOMAIN=m.stacker.news
 PUBLIC_URL=https://stacker.news
 SELF_URL=http://127.0.0.1:8080

api/resolvers/item.js

@@ -27,6 +27,8 @@ import { GqlAuthenticationError, GqlInputError } from '@/lib/error'
 import { verifyHmac } from './wallet'
 import { parse } from 'tldts'
 import { shuffleArray } from '@/lib/rand'
+import { $ssrLexicalHTMLGenerator } from '@/lib/lexical/utils/server/lexicalToHTML'
+import { prepareLexicalState } from '@/lib/lexical/utils/server/interpolator'
 
 function commentsOrderByClause (me, models, sort) {
   const sharedSortsArray = []
@@ -112,6 +114,7 @@ export async function getItem (parent, { id }, { me, models }) {
         activeOrMine(me)
       )}`
   }, Number(id))
+
   return item
 }
 
@@ -1091,6 +1094,33 @@ export default {
       })
 
       return result.lastViewedAt
+    },
+    executeConversion: async (parent, { itemId, fullRefresh }, { models }) => {
+      if (process.env.NODE_ENV !== 'development') {
+        throw new GqlInputError('only allowed in sndev')
+      }
+      console.log('executing conversion for itemId', itemId)
+
+      const alreadyScheduled = await models.$queryRaw`
+        SELECT 1
+        FROM pgboss.job
+        WHERE name = 'migrateLegacyContent' AND data->>'itemId' = ${itemId}::TEXT AND state <> 'completed'
+      `
+      if (alreadyScheduled.length > 0) return false
+
+      // singleton job, so that we don't run the same job multiple times
+      // if on concurrent requests the check above fails
+      await models.$executeRaw`
+        INSERT INTO pgboss.job (name, data, retrylimit, retrybackoff, startafter, keepuntil, singletonKey)
+        VALUES ('migrateLegacyContent',
+                jsonb_build_object('itemId', ${itemId}::INTEGER, 'fullRefresh', ${fullRefresh}::BOOLEAN),
+                21,
+                true,
+                now(),
+                now() + interval '15 seconds',
+                'migrateLegacyContent:' || ${itemId}::TEXT)
+      `
+      return true
     }
   },
   ItemAct: {
@@ -1516,12 +1546,17 @@ export const updateItem = async (parent, { sub: subName, forward, hash, hmac, ..
     item.url = removeTracking(item.url)
   }
 
+  // create markdown from a lexical state
+  const { text, lexicalState } = await prepareLexicalState({ text: item.text, lexicalState: item.lexicalState })
+  item.text = text
+  item.lexicalState = lexicalState
+
   if (old.bio) {
     // prevent editing a bio like a regular item
-    item = { id: Number(item.id), text: item.text, title: `@${user.name}'s bio` }
+    item = { id: Number(item.id), text: item.text, lexicalState: item.lexicalState, title: `@${user.name}'s bio` }
   } else if (old.parentId) {
     // prevent editing a comment like a post
-    item = { id: Number(item.id), text: item.text, boost: item.boost }
+    item = { id: Number(item.id), text: item.text, lexicalState: item.lexicalState, boost: item.boost }
   } else {
     item = { subName, ...item }
     item.forwardUsers = await getForwardUsers(models, forward)
@@ -1531,6 +1566,11 @@ export const updateItem = async (parent, { sub: subName, forward, hash, hmac, ..
   // never change author of item
   item.userId = old.userId
 
+  // sanitize html
+  // if the html conversion fails, we'll use the lexicalState directly
+  // this might be a problem for instant content
+  item.html = $ssrLexicalHTMLGenerator(item.lexicalState)
+
   const resultItem = await performPaidAction('ITEM_UPDATE', item, { models, me, lnd })
 
   resultItem.comments = []
@@ -1545,6 +1585,13 @@ export const createItem = async (parent, { forward, ...item }, { me, models, lnd
   item.userId = me ? Number(me.id) : USER_ID.anon
 
   item.forwardUsers = await getForwardUsers(models, forward)
+
+  // create markdown from a lexical state
+  const { text, lexicalState } = await prepareLexicalState({ text: item.text, lexicalState: item.lexicalState })
+  item.text = text
+  item.lexicalState = lexicalState
+
+  // TODO: we could probably gather them from the lexical state
   item.uploadIds = uploadIdsFromText(item.text)
 
   if (item.url && !isJob(item)) {
@@ -1562,6 +1609,11 @@ export const createItem = async (parent, { forward, ...item }, { me, models, lnd
   // mark item as created with API key
   item.apiKey = me?.apiKey
 
+  // sanitize html
+  // if the html conversion fails, we'll use the lexicalState directly
+  // this might be a problem for instant content
+  item.html = $ssrLexicalHTMLGenerator(item.lexicalState)
+
   const resultItem = await performPaidAction('ITEM_CREATE', item, { models, me, lnd })
 
   resultItem.comments = []

api/resolvers/sub.js

@@ -7,6 +7,7 @@ import performPaidAction from '../paidAction'
 import { GqlAuthenticationError, GqlInputError } from '@/lib/error'
 import { uploadIdsFromText } from './upload'
 import { Prisma } from '@prisma/client'
+import { prepareLexicalState } from '@/lib/lexical/utils/server/interpolator'
 
 export async function getSub (parent, { name }, { models, me }) {
   if (!name) return null
@@ -363,6 +364,12 @@ export default {
 
 async function createSub (parent, data, { me, models, lnd }) {
   try {
+    // QUIRK
+    // if we have a lexicalState, we'll convert it to markdown to fit the schema
+    if (data.lexicalState) {
+      const { text } = prepareLexicalState({ lexicalState: data.lexicalState })
+      data.desc = text
+    }
     return await performPaidAction('TERRITORY_CREATE', data, { me, models, lnd })
   } catch (error) {
     if (error.code === 'P2002') {
@@ -390,6 +397,12 @@ async function updateSub (parent, { oldName, ...data }, { me, models, lnd }) {
   }
 
   try {
+    // QUIRK
+    // if we have a lexicalState, we'll convert it to markdown to fit the schema
+    if (data.lexicalState) {
+      const { text } = prepareLexicalState({ lexicalState: data.lexicalState })
+      data.desc = text
+    }
     return await performPaidAction('TERRITORY_UPDATE', { oldName, ...data }, { me, models, lnd })
   } catch (error) {
     if (error.code === 'P2002') {

api/resolvers/user.js

@@ -756,19 +756,19 @@ export default {
 
       return Number(photoId)
     },
-    upsertBio: async (parent, { text }, { me, models, lnd }) => {
+    upsertBio: async (parent, { text, lexicalState }, { me, models, lnd }) => {
       if (!me) {
         throw new GqlAuthenticationError()
       }
 
-      await validateSchema(bioSchema, { text })
+      await validateSchema(bioSchema, { text, lexicalState })
 
       const user = await models.user.findUnique({ where: { id: me.id } })
 
       if (user.bioId) {
-        return await updateItem(parent, { id: user.bioId, bio: true, text, title: `@${user.name}'s bio` }, { me, models, lnd })
+        return await updateItem(parent, { id: user.bioId, bio: true, text, lexicalState, title: `@${user.name}'s bio` }, { me, models, lnd })
       } else {
-        return await createItem(parent, { bio: true, text, title: `@${user.name}'s bio` }, { me, models, lnd })
+        return await createItem(parent, { bio: true, text, lexicalState, title: `@${user.name}'s bio` }, { me, models, lnd })
       }
     },
     generateApiKey: async (parent, { id }, { models, me }) => {

api/typeDefs/item.js

@@ -46,26 +46,27 @@ export default gql`
     subscribeItem(id: ID): Item
     deleteItem(id: ID): Item
     upsertLink(
-      id: ID, sub: String, title: String!, url: String!, text: String, boost: Int, forward: [ItemForwardInput],
+      id: ID, sub: String, title: String!, url: String!, text: String, lexicalState: String, boost: Int, forward: [ItemForwardInput],
       hash: String, hmac: String): ItemPaidAction!
     upsertDiscussion(
-      id: ID, sub: String, title: String!, text: String, boost: Int, forward: [ItemForwardInput],
+      id: ID, sub: String, title: String!, text: String, lexicalState: String, boost: Int, forward: [ItemForwardInput],
       hash: String, hmac: String): ItemPaidAction!
     upsertBounty(
-      id: ID, sub: String, title: String!, text: String, bounty: Int, boost: Int, forward: [ItemForwardInput],
+      id: ID, sub: String, title: String!, text: String, lexicalState: String, bounty: Int, boost: Int, forward: [ItemForwardInput],
       hash: String, hmac: String): ItemPaidAction!
     upsertJob(
       id: ID, sub: String!, title: String!, company: String!, location: String, remote: Boolean,
-      text: String!, url: String!, boost: Int, status: String, logo: Int): ItemPaidAction!
+      text: String!, lexicalState: String, url: String!, boost: Int, status: String, logo: Int): ItemPaidAction!
     upsertPoll(
-      id: ID, sub: String, title: String!, text: String, options: [String!]!, boost: Int, forward: [ItemForwardInput], pollExpiresAt: Date,
+      id: ID, sub: String, title: String!, text: String, lexicalState: String, options: [String!]!, boost: Int, forward: [ItemForwardInput], pollExpiresAt: Date,
       randPollOptions: Boolean, hash: String, hmac: String): ItemPaidAction!
     updateNoteId(id: ID!, noteId: String!): Item!
-    upsertComment(id: ID, text: String!, parentId: ID, boost: Int, hash: String, hmac: String): ItemPaidAction!
+    upsertComment(id: ID, text: String, lexicalState: String, parentId: ID, boost: Int, hash: String, hmac: String): ItemPaidAction!
     act(id: ID!, sats: Int, act: String, hasSendWallet: Boolean): ItemActPaidAction!
     pollVote(id: ID!): PollVotePaidAction!
     toggleOutlaw(id: ID!): Item!
     updateCommentsViewAt(id: ID!, meCommentsViewedAt: Date!): Date
+    executeConversion(itemId: ID!, fullRefresh: Boolean!): Boolean!
   }
 
   type PollVoteResult {
@@ -120,6 +121,8 @@ export default gql`
     url: String
     searchText: String
     text: String
+    lexicalState: String
+    html: String
     parentId: Int
     parent: Item
     root: Item

api/typeDefs/sub.js

@@ -18,7 +18,7 @@ export default gql`
   }
 
   extend type Mutation {
-    upsertSub(oldName: String, name: String!, desc: String, baseCost: Int!,
+    upsertSub(oldName: String, name: String!, desc: String, lexicalState: String, baseCost: Int!,
       replyCost: Int!,
       postTypes: [String!]!,
       billingType: String!, billingAutoRenew: Boolean!,
@@ -27,7 +27,7 @@ export default gql`
     toggleMuteSub(name: String!): Boolean!
     toggleSubSubscription(name: String!): Boolean!
     transferTerritory(subName: String!, userName: String!): Sub
-    unarchiveTerritory(name: String!, desc: String, baseCost: Int!,
+    unarchiveTerritory(name: String!, desc: String, lexicalState: String, baseCost: Int!,
       replyCost: Int!, postTypes: [String!]!,
       billingType: String!, billingAutoRenew: Boolean!,
       moderated: Boolean!, nsfw: Boolean!): SubPaidAction!
@@ -39,6 +39,8 @@ export default gql`
     userId: Int!
     user: User!
     desc: String
+    lexicalState: String
+    html: String
     updatedAt: Date!
     postTypes: [String!]!
     allowFreebies: Boolean!

api/typeDefs/user.js

@@ -45,7 +45,7 @@ export default gql`
     setSettings(settings: SettingsInput!): User
     cropPhoto(photoId: ID!, cropData: CropData): String!
     setPhoto(photoId: ID!): Int!
-    upsertBio(text: String!): ItemPaidAction!
+    upsertBio(text: String!, lexicalState: String!): ItemPaidAction!
     setWalkthrough(tipPopover: Boolean, upvotePopover: Boolean): Boolean
     unlinkAuth(authType: String!): AuthMethods!
     linkUnverifiedEmail(email: String!): Boolean

capture/index.js

@@ -1,5 +1,7 @@
 import express from 'express'
 import puppeteer from 'puppeteer'
+import mediaCheck from './media-check.js'
+import cors from 'cors'
 
 const captureUrl = process.env.CAPTURE_URL || 'http://host.docker.internal:3000/'
 const port = process.env.PORT || 5678
@@ -55,6 +57,12 @@ app.get('/health', (req, res) => {
   res.status(200).end()
 })
 
+app.get('/media/:url', cors({
+  origin: process.env.NEXT_PUBLIC_URL,
+  methods: ['GET', 'OPTIONS'],
+  credentials: false
+}), mediaCheck)
+
 app.get('/*', async (req, res) => {
   const url = new URL(req.originalUrl, captureUrl)
   const timeLabel = `${Date.now()}-${url.href}`

capture/media-check.js

@@ -0,0 +1,105 @@
+import { filetypemime } from 'magic-bytes.js'
+
+const TIMEOUT_HEAD = 2000
+const TIMEOUT_GET = 10000
+const BYTE_LIMIT = 8192
+
+export function isImageMime (mime) { return typeof mime === 'string' && mime.startsWith('image/') }
+
+export function isVideoMime (mime) { return typeof mime === 'string' && mime.startsWith('video/') }
+
+// adapted from lib/time.js
+function timeoutSignal (timeout) {
+  const controller = new AbortController()
+
+  if (timeout) {
+    setTimeout(() => {
+      controller.abort(new Error(`timeout after ${timeout / 1000}s`))
+    }, timeout)
+  }
+
+  return controller.signal
+}
+
+const requiresAuth = (res) => res.status === 401 || res.status === 403
+
+async function headMime (url, timeout = TIMEOUT_HEAD) {
+  const res = await fetch(url, { method: 'HEAD', signal: timeoutSignal(timeout) })
+  // bail on auth or forbidden
+  if (requiresAuth(res)) return null
+
+  return res.headers.get('content-type')
+}
+
+async function readMagicBytes (url, { timeout = TIMEOUT_GET, byteLimit = BYTE_LIMIT } = {}) {
+  const res = await fetch(url, {
+    method: 'GET',
+    // accept image and video, but not other types
+    headers: { Range: `bytes=0-${byteLimit - 1}`, Accept: 'image/*,video/*;q=0.9,*/*;q=0.8' },
+    signal: timeoutSignal(timeout)
+  })
+  // bail on auth or forbidden
+  if (requiresAuth(res)) return { bytes: null, headers: res.headers }
+
+  // stream a small chunk if possible, otherwise read buffer
+  if (res.body?.getReader) {
+    const reader = res.body.getReader()
+    let received = 0
+    const chunks = []
+    try {
+      while (received < byteLimit) {
+        const { done, value } = await reader.read()
+        if (done) break
+        chunks.push(value)
+        received += value.byteLength
+      }
+    } finally {
+      try { reader.releaseLock?.() } catch {}
+      try { res.body?.cancel?.() } catch {}
+    }
+    const buf = new Uint8Array(received)
+    let offset = 0
+    for (const c of chunks) {
+      buf.set(c, offset)
+      offset += c.byteLength
+    }
+    return { bytes: buf, headers: res.headers }
+  } else {
+    const ab = await res.arrayBuffer()
+    const buf = new Uint8Array(ab.slice(0, byteLimit))
+    return { bytes: buf, headers: res.headers }
+  }
+}
+
+export default async function mediaCheck (req, res) {
+  // express automatically decodes the values in req.params (using decodeURIComponent)
+  let url = req.params.url
+  if (typeof url !== 'string' || !/^(https?:\/\/)/.test(url)) {
+    return res.status(400).json({ error: 'Invalid URL' })
+  }
+
+  try {
+    // in development, the capture container can't reach the public media url,
+    // so we need to replace it with its docker equivalent, e.g. http://s3:4566/uploads
+    if (url.startsWith(process.env.NEXT_PUBLIC_MEDIA_URL) && process.env.NODE_ENV === 'development') {
+      url = url.replace(process.env.NEXT_PUBLIC_MEDIA_URL, process.env.MEDIA_URL_DOCKER)
+    }
+
+    // trying with HEAD first, as it's the cheapest option
+    try {
+      const ct = await headMime(url)
+      if (isImageMime(ct) || isVideoMime(ct)) {
+        return res.status(200).json({ mime: ct, isImage: isImageMime(ct), isVideo: isVideoMime(ct) })
+      }
+    } catch {}
+
+    // otherwise, read the first bytes
+    const { bytes, headers } = await readMagicBytes(url)
+    const mimes = bytes ? filetypemime(bytes) : null
+    const mime = mimes?.[0] ?? headers.get('content-type') ?? null
+    return res.status(200).json({ mime, isImage: isImageMime(mime), isVideo: isVideoMime(mime) })
+  } catch (err) {
+    console.log('media check error:', err)
+    return res.status(500).json({ mime: null, isImage: false, isVideo: false })
+  }
+}