tiptapify 0.3.5 → 0.4.0

package/src/index.ts

@@ -5,6 +5,7 @@ import { useTiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
 import { TiptapifyFooterAlignment } from '@tiptapify/types/editor'
 import { createAiBackendProvider } from '@tiptapify/extensions/components/ai/backend'
 import { registerSkin, defineSkin } from '@tiptapify/skins/registry'
+import { contentCss, inlineContentStyles } from '@tiptapify/utils/contentStyles'
 
 import { Editor as TipTapEditor, nodeViewProps, NodeViewWrapper, VueNodeViewRenderer } from '@tiptap/vue-3'
 import { Node, Mark, markInputRule, markPasteRule, mergeAttributes } from '@tiptap/core'
@@ -52,9 +53,12 @@ export {
   mergeAttributes,
   registerSkin,
   defineSkin,
+  contentCss,
+  inlineContentStyles,
 }
 
 export type { TiptapifyConfig } from '@tiptapify/composables/useTiptapifyConfig'
+export type { TiptapifyContentStyles } from '@tiptapify/utils/contentStyles'
 export type { TiptapifyFooterAlignment }
 export type { CommandProps, InputRuleMatch, PasteRuleMatch }
 export type {
@@ -65,6 +69,10 @@ export type {
   TiptapifySkinConfig,
   TiptapifySkinInput,
   ResolvedShape,
+  TiptapifyLinkPreviewData,
+  TiptapifyLinkPreviewOptions,
+  TiptapifyUploadKind,
+  TiptapifyUploadOptions,
 } from '@tiptapify/types/editor'
 export type {
   TiptapifyAiBackendProviderOptions,

package/src/skins/registry.test.ts

@@ -88,7 +88,7 @@ describe('skin registry', () => {
     expect(skin.className).toBe('tiptapify-skin-inline')
     expect(skin.shape.bubble).toBe('flat')
     expect(skin.tokens['--tf-bubble-radius']).toBe('2px')
-    expect(skin.tokens['--tf-bubble-padding']).toBe('4px')
+    expect(skin.tokens['--tf-bubble-border']).toBe('1px solid rgba(var(--v-border-color), var(--v-border-opacity))')
   })
 
   it('ignores unknown token keys in dev with a warning', () => {

package/src/skins/tokens.reachability.test.ts

@@ -20,6 +20,7 @@ const SOURCES = [
   '../components/MenuBubble.vue',
   '../components/ImageBubbleMenu.vue',
   '../components/UI/TiptapifyDialog.vue',
+  '../components/UI/BubbleRow.vue',
   './menu.css',
   '../extensions/components/list/styles/ListStyleButton.vue',
 ]

package/src/skins/tokens.ts

@@ -33,7 +33,7 @@ export const baseColors: TiptapifySkinColors = {
   buttonActiveHoverBg: 'rgb(var(--v-theme-primary))',
   bubbleBg: 'rgb(var(--v-theme-surface))',
   bubbleBorder: 'none',
-  bubbleShadow: '4px 4px 20px var(--dark-gray)',
+  bubbleShadow: '0 4px 14px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08)',
   menuBorder: 'none',
   menuShadow: '0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)',
   menuItemActiveBg: 'rgba(0, 0, 0, 0)',
@@ -62,8 +62,8 @@ export const baseMetrics: TiptapifySkinMetrics = {
   dividerHeight: '0px',
   buttonRadius: '4px',
   bubbleRadius: '6px',
-  bubblePadding: '0px',
-  bubbleGap: '0px',
+  bubblePadding: '4px',
+  bubbleGap: '2px',
   menuListPadding: '8px 0px',
   menuRadius: '4px',
   menuItemRadius: '0px',

package/src/types/editor.ts

@@ -11,7 +11,7 @@ export type variantFieldTypes = 'outlined' | 'plain' | 'filled' | 'solo' | 'solo
 
 export type TiptapifyFooterAlignment = 'start' | 'center' | 'end'
 
-// The skin of the editor chrome: 'default' is the classic look, 'pastel' is the quiet 0.3.3 look
+// The skin of the editor chrome: 'default' is the classic look, 'pastel' is the quiet look
 export type TiptapifySkin = 'default' | 'pastel'
 
 // Structural variants a token cannot express (component markup, vuetify prop bindings).
@@ -127,6 +127,9 @@ export type TiptapifyAiChatMessage = {
 export type TiptapifyAiEditorContext = {
   prompt: string,
   selectedText: string,
+  // The text of the selection's paragraph before and after it (empty without a selection)
+  textBefore: string,
+  textAfter: string,
   text: string,
   html: string,
   json: object,
@@ -220,3 +223,39 @@ export type TiptapifyAiResolvedOptions = TiptapifyAiOptions & {
   enabled: boolean,
   promptExamples: TiptapifyAiPromptExample[],
 }
+
+export type TiptapifyUploadKind = 'image' | 'video'
+
+// The upload endpoint: `POST {endpoint}` takes a file (multipart `file` and `kind`) and answers `{ url }`
+export type TiptapifyUploadOptions = {
+  endpoint: string,
+  // Extra request headers, e.g. authorization
+  headers?: Record<string, string>,
+}
+
+export type TiptapifyUploadContext = {
+  kind: TiptapifyUploadKind,
+  // Upload progress from 0 to 1
+  onProgress: (fraction: number) => void,
+  // Aborted when the user cancels the upload or closes the dialog
+  signal: AbortSignal,
+}
+
+// Stores a picked file and gives its URL: the upload endpoint, else (an image only) a base64 data URL
+export type TiptapifyUpload = (file: File, context: TiptapifyUploadContext) => Promise<{ url: string }>
+
+// The backend endpoint of link cards: it reads the OpenGraph data of pages (a browser can't, CORS)
+export type TiptapifyLinkPreviewOptions = {
+  // `GET {endpoint}` answers the handshake, `GET {endpoint}?url=<page>` the data of the page
+  endpoint: string,
+  // Extra request headers, e.g. authorization
+  headers?: Record<string, string>,
+}
+
+export type TiptapifyLinkPreviewData = {
+  url: string,
+  title?: string,
+  description?: string,
+  image?: string,
+  siteName?: string,
+}

package/src/utils/contentStyles.test.ts

@@ -0,0 +1,116 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { Editor } from '@tiptap/core'
+import { editorExtensions } from '@tiptapify/components/editorExtensions'
+import { contentCss, contentHTML, inlineContentStyles } from '@tiptapify/utils/contentStyles'
+
+let editor: Editor | null = null
+
+function editorWith(content: string): Editor {
+  editor = new Editor({ extensions: editorExtensions('', false, []), content })
+
+  return editor
+}
+
+afterEach(() => {
+  editor?.destroy()
+  editor = null
+})
+
+function element(html: string, selector: string): HTMLElement {
+  const template = document.createElement('template')
+  template.innerHTML = html
+
+  return template.content.querySelector<HTMLElement>(selector)!
+}
+
+const card = (layout: string) => `<a class="tiptapify-link-card" data-link-card="${layout}" href="https://example.com">`
+  + '<img class="tiptapify-link-card__image" src="/i.png" alt=""><span class="tiptapify-link-card__body">'
+  + '<span class="tiptapify-link-card__site">Example</span><span class="tiptapify-link-card__title">Title</span>'
+  + '<span class="tiptapify-link-card__description">Text</span></span></a>'
+
+describe('content styles', () => {
+  it('make a stylesheet for a site, weightless under :where(), and one for the editor', () => {
+    expect(contentCss()).toContain(':where(.tiptapify-content) .tiptapify-link-card { display: flex;')
+    expect(contentCss('.tiptap', { weightless: false })).toContain('.tiptap .tiptapify-link-card { display: flex;')
+    expect(contentCss('.tiptap', { weightless: false })).not.toContain(':where(')
+  })
+
+  it('write the look of a link card into its elements, per layout', () => {
+    const compact = inlineContentStyles(card('compact'))
+    expect(element(compact, 'a').style.display).toBe('flex')
+    expect(element(compact, 'a').style.flexWrap).toBe('wrap')
+    expect(element(compact, 'a').style.color).toBe('inherit')
+    expect(element(compact, 'img').style.objectFit).toBe('cover')
+    expect(element(compact, '.tiptapify-link-card__title').style.fontWeight).toBe('600')
+    expect(element(compact, '.tiptapify-link-card__description').getAttribute('style')).toContain('-webkit-line-clamp: 3;')
+
+    const large = inlineContentStyles(card('large'))
+    expect(element(large, 'a').style.flexDirection).toBe('column')
+    expect(element(large, 'a').style.maxWidth).toBe('520px')
+    expect(element(large, 'img').getAttribute('style')).toContain('aspect-ratio: 1.91 / 1;')
+  })
+
+  it('keep the styles an element has and change nothing when applied twice', () => {
+    const html = '<figure data-align="left"><img src="/a.png" style="float: left;"><figcaption>Caption</figcaption></figure>'
+    const once = inlineContentStyles(html)
+
+    expect(element(once, 'img').style.float).toBe('left')
+    expect(element(once, 'img').style.display).toBe('block')
+    expect(element(once, 'figure').style.float).toBe('left')
+    expect(element(once, 'figure').style.maxWidth).toBe('50%')
+    expect(element(once, 'figcaption').style.textAlign).toBe('start')
+    expect(inlineContentStyles(once)).toBe(once)
+  })
+
+  it('size videos and embeds, and lay out task lists', () => {
+    const html = '<video src="/a.mp4"></video><video src="/b.mp4" width="320"></video>'
+      + '<div data-youtube-video=""><iframe src="https://www.youtube-nocookie.com/embed/x"></iframe></div>'
+      + '<ul data-type="taskList"><li data-type="taskItem"><label><input type="checkbox"></label><div><p>Task</p></div></li></ul>'
+      + '<p>Text</p>'
+    const styled = inlineContentStyles(html)
+
+    expect(element(styled, 'video[src="/a.mp4"]').getAttribute('style')).toContain('aspect-ratio: 16 / 9;')
+    expect(element(styled, 'video[src="/b.mp4"]').getAttribute('style')).toBe('display: block; max-width: 100%;')
+    expect(element(styled, 'iframe').getAttribute('style')).toContain('aspect-ratio: 16 / 9;')
+    expect(element(styled, 'ul').style.listStyle).toBe('none')
+    expect(element(styled, 'li').style.display).toBe('flex')
+    expect(element(styled, 'li p').style.margin).toBe('0px')
+    expect(element(styled, 'ul ~ p').hasAttribute('style')).toBe(false)
+  })
+
+  it('leave the HTML as it is for a site with content.css', () => {
+    expect(contentHTML(card('compact'), 'classes')).toBe(card('compact'))
+  })
+})
+
+describe('content styles in the editor', () => {
+  const content = `<p>Text</p>${card('compact')}`
+    + '<figure data-align="right"><img src="/a.png" style="float: right;"><figcaption>Caption</figcaption></figure>'
+    + '<div data-youtube-video=""><iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe></div>'
+    + '<video src="/a.mp4" controls=""></video>'
+    + '<ul data-type="taskList"><li data-type="taskItem" data-checked="true"><p>Done</p></li></ul>'
+
+  it('are ignored when HTML with them loads again: it saves the same content', () => {
+    const clean = editorWith(content).getHTML()
+    editor!.destroy()
+
+    const styled = inlineContentStyles(clean)
+    const reloaded = editorWith(styled).getHTML()
+
+    expect(reloaded).toBe(clean)
+    expect(inlineContentStyles(reloaded)).toBe(styled)
+  })
+
+  it('keep a floated image as a figure with its float', () => {
+    const html = editorWith(content).getHTML()
+
+    expect(html).toContain('<figure data-align="right"><img src="/a.png" style="float: right;">')
+  })
+
+  it('keep a responsive YouTube video without a size when it loads again', () => {
+    const html = editorWith(content).getHTML()
+
+    expect(element(html, 'div[data-youtube-video] iframe').hasAttribute('width')).toBe(false)
+    expect(editor!.state.doc.child(3).attrs).toMatchObject({ width: null, height: null })
+  })
+})

package/src/utils/contentStyles.ts

@@ -0,0 +1,175 @@
+/*
+ * The look of the content the editor saves (link cards, captions, videos, embeds, task lists), described once
+ * for the `contentStyles` prop: `inline` writes it into `style` attributes (inlineContentStyles), `classes`
+ * leaves it to `tiptapify/content.css` (contentCss) around content in a `.tiptapify-content` element.
+ * Colors are left to the site: muted text and borders use opacity, so they suit a light and a dark theme alike.
+ * The editor parses its elements by attributes and classes only, so these styles are ignored on load.
+ */
+
+// No dependencies: the build imports this file to write dist/content.css
+
+export type TiptapifyContentStyles = 'inline' | 'classes'
+
+export type ContentRule = { selector: string, style: Record<string, string> }
+
+export const CONTENT_CLASS = 'tiptapify-content'
+
+const muted = '0.7'
+const border = '1px solid rgba(128, 128, 128, 0.35)'
+const responsive = { width: '100%', height: 'auto', 'aspect-ratio': '16 / 9' }
+
+// In order: a later rule wins over an earlier one for the same property
+export const contentRules: ContentRule[] = [
+  // Link cards: compact (the image beside the texts, under them when narrow), large (image on top), text
+  {
+    selector: '.tiptapify-link-card',
+    style: {
+      display: 'flex',
+      'flex-wrap': 'wrap',
+      overflow: 'hidden',
+      margin: '1rem 0',
+      border,
+      'border-radius': '10px',
+      color: 'inherit',
+      'text-decoration': 'none',
+    },
+  },
+  {
+    selector: '.tiptapify-link-card__image',
+    // min-width 0: an image in a row would not shrink below its own width (an OpenGraph image is 1200px)
+    style: { flex: '1 1 180px', 'min-width': '0', 'max-width': '100%', 'min-height': '100px', margin: '0', 'object-fit': 'cover' },
+  },
+  {
+    selector: '.tiptapify-link-card__body',
+    style: { display: 'flex', flex: '999 1 260px', 'flex-direction': 'column', gap: '4px', 'min-width': '0', padding: '12px 16px' },
+  },
+  { selector: '.tiptapify-link-card__site', style: { 'font-size': '0.8125em', opacity: muted } },
+  { selector: '.tiptapify-link-card__title', style: { 'font-weight': '600', 'line-height': '1.35' } },
+  {
+    selector: '.tiptapify-link-card__description',
+    style: {
+      display: '-webkit-box',
+      overflow: 'hidden',
+      'font-size': '0.875em',
+      'line-height': '1.45',
+      opacity: muted,
+      '-webkit-box-orient': 'vertical',
+      '-webkit-line-clamp': '3',
+    },
+  },
+  {
+    selector: '.tiptapify-link-card[data-link-card="large"]',
+    style: { 'flex-direction': 'column', 'flex-wrap': 'nowrap', 'max-width': '520px' },
+  },
+  {
+    selector: '.tiptapify-link-card[data-link-card="large"] .tiptapify-link-card__image',
+    style: { flex: 'none', width: '100%', height: 'auto', 'min-height': '0', 'aspect-ratio': '1.91 / 1' },
+  },
+  { selector: '.tiptapify-link-card[data-link-card="large"] .tiptapify-link-card__body', style: { flex: 'none' } },
+
+  // Images with their caption under them: centered, or floated left or right with the text around them
+  {
+    selector: 'figure',
+    style: {
+      display: 'flex',
+      'flex-direction': 'column',
+      gap: '4px',
+      width: 'fit-content',
+      'max-width': '100%',
+      margin: '1rem auto',
+    },
+  },
+  { selector: 'figure:not([data-align])', style: { 'align-items': 'center' } },
+  { selector: 'figure img', style: { display: 'block', 'max-width': '100%', height: 'auto', margin: '0' } },
+  { selector: 'figure figcaption', style: { 'font-size': '0.875em', opacity: muted, 'text-align': 'center' } },
+  { selector: 'figure[data-align] figcaption', style: { 'text-align': 'start' } },
+  {
+    selector: 'figure[data-align="left"]',
+    style: { float: 'left', 'max-width': '50%', margin: '0.25rem 1.25rem 1rem 0' },
+  },
+  {
+    selector: 'figure[data-align="right"]',
+    style: { float: 'right', 'max-width': '50%', margin: '0.25rem 0 1rem 1.25rem' },
+  },
+
+  // Videos and embeds: never wider than the text; without a size they fill its width at 16:9
+  { selector: 'video', style: { display: 'block', 'max-width': '100%' } },
+  { selector: 'video:not([width])', style: responsive },
+  { selector: 'div[data-youtube-video] iframe', style: { display: 'block', 'max-width': '100%', border: '0' } },
+  { selector: 'div[data-youtube-video] iframe:not([width])', style: responsive },
+  { selector: '.iframe-wrapper iframe', style: { display: 'block', 'max-width': '100%' } },
+  { selector: '.iframe-wrapper iframe[src^="https://player.vimeo.com/"]:not([width])', style: responsive },
+
+  // Task lists: a checkbox beside each item instead of a bullet
+  { selector: 'ul[data-type="taskList"]', style: { 'list-style': 'none', 'margin-left': '0', padding: '0' } },
+  { selector: 'ul[data-type="taskList"] ul[data-type="taskList"]', style: { margin: '0' } },
+  { selector: 'ul[data-type="taskList"] > li', style: { display: 'flex', 'align-items': 'flex-start' } },
+  { selector: 'ul[data-type="taskList"] > li > label', style: { flex: '0 0 auto', 'margin-right': '0.5rem' } },
+  { selector: 'ul[data-type="taskList"] > li > div', style: { flex: '1 1 auto' } },
+  // The text of a task sits on the line of its checkbox: no default margin of the paragraph above it
+  { selector: 'ul[data-type="taskList"] > li > div > p', style: { margin: '0' } },
+]
+
+function declarations(style: Record<string, string>): string {
+  return Object.entries(style).map(([property, value]) => `${property}: ${value};`).join(' ')
+}
+
+/**
+ * The rules as a stylesheet for the content inside `scope`. For a site the scope is wrapped in `:where()`, so
+ * any rule of the site wins over these without `!important`; the editor keeps the scope's own weight.
+ */
+export function contentCss(scope = `.${CONTENT_CLASS}`, { weightless = true }: { weightless?: boolean } = {}): string {
+  const prefix = weightless ? `:where(${scope})` : scope
+
+  return contentRules.map(({ selector, style }) => `${prefix} ${selector} { ${declarations(style)} }`).join('\n') + '\n'
+}
+
+function parseStyle(style: string): Map<string, string> {
+  const properties = new Map<string, string>()
+  for (const declaration of style.split(';')) {
+    const colon = declaration.indexOf(':')
+    if (colon > 0) {
+      properties.set(declaration.slice(0, colon).trim().toLowerCase(), declaration.slice(colon + 1).trim())
+    }
+  }
+
+  return properties
+}
+
+/**
+ * The content HTML with the rules written into its `style` attributes. Other properties an element has (the
+ * float of an image) are kept and the rules' own are overwritten, so applying it twice changes nothing.
+ * Without a DOM (server rendering) the HTML is returned as it is.
+ */
+export function inlineContentStyles(html: string): string {
+  if (typeof document === 'undefined' || !html) {
+    return html
+  }
+
+  // The content of a template is inert: no script runs and no image loads while the HTML is restyled
+  const template = document.createElement('template')
+  template.innerHTML = html
+  const styles = new Map<Element, Map<string, string>>()
+
+  for (const { selector, style } of contentRules) {
+    for (const element of template.content.querySelectorAll(selector)) {
+      const properties = styles.get(element) ?? parseStyle(element.getAttribute('style') ?? '')
+      for (const [property, value] of Object.entries(style)) {
+        properties.delete(property)
+        properties.set(property, value)
+      }
+      styles.set(element, properties)
+    }
+  }
+
+  for (const [element, properties] of styles) {
+    element.setAttribute('style', [...properties].map(([property, value]) => `${property}: ${value};`).join(' '))
+  }
+
+  return template.innerHTML
+}
+
+/** The HTML the editor gives out: with the styles written in, or as it is for a site with content.css */
+export function contentHTML(html: string, mode: TiptapifyContentStyles): string {
+  return mode === 'inline' ? inlineContentStyles(html) : html
+}

package/src/utils/mediaSize.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest'
+import { ratioOf, resizeSide, toSize } from '@tiptapify/utils/mediaSize'
+
+describe('media size', () => {
+  it('reads a size as a whole positive number', () => {
+    expect(toSize('640')).toBe(640)
+    expect(toSize(359.6)).toBe(360)
+    expect(toSize('')).toBeNull()
+    expect(toSize(-5)).toBeNull()
+  })
+
+  it('keeps the other side in the ratio when one side changes', () => {
+    expect(resizeSide({ width: 640, height: 360 }, 'width', 1280, 16 / 9)).toEqual({ width: 1280, height: 720 })
+    expect(resizeSide({ width: 640, height: 360 }, 'height', 450, 16 / 9)).toEqual({ width: 800, height: 450 })
+    expect(resizeSide({ width: 640, height: 360 }, 'width', 800, null)).toEqual({ width: 800, height: 360 })
+  })
+
+  it('takes the ratio of the size, else of the fallback', () => {
+    expect(ratioOf({ width: 400, height: 300 }, 16 / 9)).toBe(4 / 3)
+    expect(ratioOf({ width: 400, height: null }, 16 / 9)).toBe(16 / 9)
+  })
+})

package/src/utils/mediaSize.ts

@@ -0,0 +1,27 @@
+export type MediaSize = { width: number | null, height: number | null }
+
+// A positive whole number from a number field or an attribute, else null
+export function toSize(value: unknown): number | null {
+  const number = typeof value === 'number' ? value : parseFloat(String(value ?? ''))
+
+  return Number.isFinite(number) && number > 0 ? Math.round(number) : null
+}
+
+/**
+ * The size after one side changed: with a ratio (width / height) the other side follows it.
+ */
+export function resizeSide(size: MediaSize, side: keyof MediaSize, value: unknown, ratio: number | null): MediaSize {
+  const changed = toSize(value)
+  if (!ratio || !changed) {
+    return { ...size, [side]: changed }
+  }
+
+  return side === 'width'
+    ? { width: changed, height: toSize(changed / ratio) }
+    : { width: toSize(changed * ratio), height: changed }
+}
+
+// The ratio (width / height) of a size with both sides, else the fallback
+export function ratioOf(size: MediaSize, fallback: number): number {
+  return size.width && size.height ? size.width / size.height : fallback
+}

package/src/utils/validateHref.test.ts

@@ -67,14 +67,43 @@ describe('isValidHref', () => {
     expect(isValidHref('https://.com')).toBe(false)
   })
 
-  it('rejects unsupported protocols', () => {
-    expect(isValidHref('ftp://example.com')).toBe(false)
+  it('accepts any protocol with a host: ftp, sftp, file shares', () => {
+    for (const href of ['ftp://files.example.com/a.zip', 'sftp://user@host/dir', 'smb://server/share', 'ftp://192.168.0.10/']) {
+      expect(isValidHref(href), href).toBe(true)
+    }
+  })
+
+  it('accepts an internal host without a dot: intranet and localhost', () => {
+    for (const href of ['http://intranet/wiki/page', 'http://localhost:8080/admin', 'https://jira/browse/LIGA-1']) {
+      expect(isValidHref(href), href).toBe(true)
+    }
+  })
+
+  it('accepts other protocols without slashes: sms, skype, magnet', () => {
+    for (const href of ['sms:+380441234567', 'skype:user.name?call', 'magnet:?xt=urn:btih:abc']) {
+      expect(isValidHref(href), href).toBe(true)
+    }
+  })
+
+  it('rejects a host and port typed without a protocol: it is not a protocol', () => {
+    expect(isValidHref('localhost:8080/admin')).toBe(false)
+  })
+
+  it('rejects a protocol with slashes but no host', () => {
+    expect(isValidHref('ftp://')).toBe(false)
+    expect(isValidHref('ftp:///path')).toBe(false)
   })
 
   it('rejects javascript pseudo-protocols', () => {
     expect(isValidHref('javascript:alert(1)')).toBe(false)
   })
 
+  it('rejects the protocols that run code or embed content', () => {
+    for (const href of ['JavaScript:alert(1)', 'vbscript:msgbox(1)', 'data:text/html;base64,PHNjcmlwdD4=']) {
+      expect(isValidHref(href), href).toBe(false)
+    }
+  })
+
   it('rejects URLs containing spaces', () => {
     expect(isValidHref('https://exa mple.com')).toBe(false)
   })
@@ -90,4 +119,20 @@ describe('isValidHref', () => {
   it('rejects plain text', () => {
     expect(isValidHref('not a url')).toBe(false)
   })
+
+  it('accepts an anchor and links relative to the site or the page', () => {
+    for (const href of ['#section-2', '/news/politics?page=2', './about', '../index.html', '?tab=comments']) {
+      expect(isValidHref(href), href).toBe(true)
+    }
+  })
+
+  it('rejects relative links with spaces and a bare anchor or slash', () => {
+    for (const href of ['#', '/', '/news/a b', '# heading']) {
+      expect(isValidHref(href), href).toBe(false)
+    }
+  })
+
+  it('rejects a protocol-relative link', () => {
+    expect(isValidHref('//evil.example/x')).toBe(false)
+  })
 })

package/src/utils/validateHref.ts

@@ -5,14 +5,25 @@ const regexTel = 'tel:\\+?[0-9]+'
 
 const hrefRegex = new RegExp(`^(${regexMailto}|${regexTel})$`, 'i')
 
-const httpPrefixRegex = /^https?:\/\//i
-const hostnameRegex = /^[^.]+(\.[^.]+)+$/
+// An anchor (#id) or a link relative to the site (/path) or the page (./, ../, ?query); not a
+// protocol-relative //host, which points to another site
+const relativeHrefRegex = /^(#|\/(?!\/)|\.{1,2}\/|\?)\S+$/
 
-function isValidHttpUrl(href: string): boolean {
-  if (!httpPrefixRegex.test(href) || /\s/.test(href)) {
-    return false
-  }
+const schemeRegex = /^([a-z][a-z0-9+.-]*):(.*)$/i
+
+// Schemes that run code or embed content instead of pointing to it
+const blockedSchemes = new Set(['javascript', 'vbscript', 'data'])
+
+// Schemes of addresses on a host: without `//` (`http:example.com`) they are a typo, not another kind of link
+const hostSchemes = new Set(['http', 'https', 'ftp', 'ftps', 'sftp'])
+
+// Host labels without empty ones (`example..com`, `.com`); a single label is an internal host (intranet, localhost)
+const hostnameRegex = /^[^.]+(\.[^.]+)*$/
 
+// `localhost:8080/admin` typed without a protocol: a host and a port, not a scheme `localhost:`
+const portRegex = /^\d+([/?#]|$)/
+
+function isValidHostUrl(href: string): boolean {
   try {
     return hostnameRegex.test(new URL(href).hostname)
   } catch {
@@ -20,6 +31,35 @@ function isValidHttpUrl(href: string): boolean {
   }
 }
 
+/**
+ * A link address: any protocol with a host (`https://`, `ftp://`, `smb://`, internal hosts without a dot
+ * included), other protocols (`mailto:`, `tel:`, `sms:`, `magnet:`…), anchors and relative links. Protocols
+ * that run code (`javascript:`, `vbscript:`, `data:`) are rejected.
+ */
 export function isValidHref(href: string): boolean {
-  return isValidHttpUrl(href || '') || hrefRegex.test(href || '')
+  const value = href || ''
+  if (relativeHrefRegex.test(value)) {
+    return true
+  }
+
+  const match = schemeRegex.exec(value)
+  if (!match || /\s/.test(value)) {
+    return false
+  }
+
+  const scheme = match[1].toLowerCase()
+  const rest = match[2]
+  if (blockedSchemes.has(scheme)) {
+    return false
+  }
+
+  if (rest.startsWith('//')) {
+    return !rest.startsWith('///') && isValidHostUrl(value)
+  }
+
+  if (scheme === 'mailto' || scheme === 'tel') {
+    return hrefRegex.test(value)
+  }
+
+  return !hostSchemes.has(scheme) && rest !== '' && !portRegex.test(rest)
 }