@puredesktop/platform-editor 1.0.0-beta.1 → 2.1.0

package/src/extensions/figure.ts

@@ -1,92 +1,92 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-
-export interface FigureOptions {
-  HTMLAttributes: Record<string, unknown>
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    figure: {
-      /** Insert a figure block with an image and an editable caption. */
-      insertFigure: (opts: {
-        src: string
-        alt?: string
-        caption?: string
-      }) => ReturnType
-    }
-  }
-}
-
-/**
- * Figure block — wraps an image and an editable caption. Markdown
- * round-trip is via `![caption](src)` (CommonMark image syntax). The
- * book's render pipeline already wraps such images in
- * `<figure><img/><figcaption/></figure>` for PDF output, so the
- * caption survives end-to-end even though it serializes through the
- * standard image syntax.
- *
- * Image-only nodes (no caption) are still produced by Image nodes directly
- * for inline images that don't deserve a figure wrapper.
- */
-export const Figure = Node.create<FigureOptions>({
-  name: 'figure',
-  group: 'block',
-  content: 'inline*',
-  defining: true,
-  isolating: true,
-  draggable: true,
-
-  addOptions() {
-    return { HTMLAttributes: {} }
-  },
-
-  addAttributes() {
-    return {
-      src: {
-        default: null,
-        parseHTML: el => el.querySelector('img')?.getAttribute('src') ?? null,
-      },
-      alt: {
-        default: '',
-        parseHTML: el => el.querySelector('img')?.getAttribute('alt') ?? '',
-      },
-    }
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: 'figure',
-        getAttrs: element =>
-          element instanceof HTMLElement &&
-          element.getAttribute('data-type') === 'mermaid'
-            ? false
-            : null,
-        contentElement: 'figcaption',
-      },
-    ]
-  },
-
-  renderHTML({ node, HTMLAttributes }) {
-    const { src, alt } = node.attrs as { src: string | null; alt: string }
-    return [
-      'figure',
-      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
-      ['img', { src, alt }],
-      ['figcaption', {}, 0],
-    ]
-  },
-
-  addCommands() {
-    return {
-      insertFigure:
-        ({ src, alt = '', caption = '' }) =>
-        ({ commands }) =>
-          commands.insertContent({
-            type: this.name,
-            attrs: { src, alt },
-            content: caption ? [{ type: 'text', text: caption }] : [],
-          }),
-    }
-  },
-})
+import { Node, mergeAttributes } from '@tiptap/core'
+
+export interface FigureOptions {
+  HTMLAttributes: Record<string, unknown>
+}
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    figure: {
+      /** Insert a figure block with an image and an editable caption. */
+      insertFigure: (opts: {
+        src: string
+        alt?: string
+        caption?: string
+      }) => ReturnType
+    }
+  }
+}
+
+/**
+ * Figure block — wraps an image and an editable caption. Markdown
+ * round-trip is via `![caption](src)` (CommonMark image syntax). The
+ * book's render pipeline already wraps such images in
+ * `<figure><img/><figcaption/></figure>` for PDF output, so the
+ * caption survives end-to-end even though it serializes through the
+ * standard image syntax.
+ *
+ * Image-only nodes (no caption) are still produced by Image nodes directly
+ * for inline images that don't deserve a figure wrapper.
+ */
+export const Figure = Node.create<FigureOptions>({
+  name: 'figure',
+  group: 'block',
+  content: 'inline*',
+  defining: true,
+  isolating: true,
+  draggable: true,
+
+  addOptions() {
+    return { HTMLAttributes: {} }
+  },
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+        parseHTML: el => el.querySelector('img')?.getAttribute('src') ?? null,
+      },
+      alt: {
+        default: '',
+        parseHTML: el => el.querySelector('img')?.getAttribute('alt') ?? '',
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figure',
+        getAttrs: element =>
+          element instanceof HTMLElement &&
+          element.getAttribute('data-type') === 'mermaid'
+            ? false
+            : null,
+        contentElement: 'figcaption',
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const { src, alt } = node.attrs as { src: string | null; alt: string }
+    return [
+      'figure',
+      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
+      ['img', { src, alt }],
+      ['figcaption', {}, 0],
+    ]
+  },
+
+  addCommands() {
+    return {
+      insertFigure:
+        ({ src, alt = '', caption = '' }) =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: { src, alt },
+            content: caption ? [{ type: 'text', text: caption }] : [],
+          }),
+    }
+  },
+})

package/src/extensions/footnote.ts

@@ -1,186 +1,186 @@
-import { Node, mergeAttributes } from '@tiptap/core'
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    footnote: {
-      /** Insert an empty footnote marker at the cursor and open it to edit. */
-      insertFootnote: () => ReturnType
-    }
-  }
-}
-
-/**
- * Footnote — an inline, atomic reference marker.
- *
- * The body shows only a small superscript number; the note text is embedded on
- * the node (the `text` attribute) and edited in a popover when the marker is
- * clicked. Numbering is by document order, recomputed live. Serializes to
- * `<sup data-footnote data-text="…">` for a clean HTML round-trip; the export
- * pipeline (prepareFootnotes) turns markers into numbered links plus a
- * footnotes section.
- */
-export const Footnote = Node.create({
-  name: 'footnote',
-  group: 'inline',
-  inline: true,
-  atom: true,
-  selectable: true,
-
-  addAttributes() {
-    return {
-      text: {
-        default: '',
-        parseHTML: el => el.getAttribute('data-text') ?? '',
-        renderHTML: (attrs: { text?: string }) => ({
-          'data-text': attrs.text ?? '',
-        }),
-      },
-    }
-  },
-
-  parseHTML() {
-    return [{ tag: 'sup[data-footnote]' }]
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return [
-      'sup',
-      mergeAttributes(HTMLAttributes, {
-        'data-footnote': '',
-        class: 'footnote-ref',
-      }),
-    ]
-  },
-
-  addCommands() {
-    return {
-      insertFootnote:
-        () =>
-        ({ commands }) =>
-          commands.insertContent({ type: this.name, attrs: { text: '' } }),
-    }
-  },
-
-  addNodeView() {
-    return ({ node, getPos, editor }) => {
-      let current = node
-      const dom = document.createElement('sup')
-      dom.className = 'footnote-ref'
-      dom.setAttribute('data-footnote', '')
-      dom.contentEditable = 'false'
-
-      const renderNumber = (): void => {
-        let count = 0
-        let mine = 0
-        const here = typeof getPos === 'function' ? getPos() : null
-        editor.state.doc.descendants((child, pos) => {
-          if (child.type.name === 'footnote') {
-            count += 1
-            if (here !== null && pos === here) mine = count
-          }
-          return true
-        })
-        dom.textContent = String(mine || count || 1)
-      }
-      renderNumber()
-
-      let popover: HTMLDivElement | null = null
-      const closePopover = (): void => {
-        popover?.remove()
-        popover = null
-        document.removeEventListener('mousedown', onDocPointerDown, true)
-      }
-      const onDocPointerDown = (event: MouseEvent): void => {
-        if (
-          popover &&
-          event.target !== dom &&
-          !popover.contains(event.target as globalThis.Node)
-        ) {
-          closePopover()
-        }
-      }
-      const openPopover = (): void => {
-        if (popover) return
-        popover = document.createElement('div')
-        popover.className = 'footnote-popover'
-        Object.assign(popover.style, {
-          position: 'fixed',
-          zIndex: '1002',
-          width: 'min(360px, calc(100vw - 24px))',
-          padding: '8px',
-          border: '1px solid var(--platform-colors-border, #d7dbe0)',
-          borderRadius: '8px',
-          background: 'var(--platform-colors-surface, #fff)',
-          boxShadow: '0 18px 42px rgb(23 29 36 / 0.18)',
-        })
-        const textarea = document.createElement('textarea')
-        textarea.value = current.attrs.text ?? ''
-        textarea.placeholder = 'Footnote text…'
-        textarea.rows = 3
-        Object.assign(textarea.style, {
-          width: '100%',
-          boxSizing: 'border-box',
-          resize: 'vertical',
-          border: '1px solid var(--platform-colors-border, #d7dbe0)',
-          borderRadius: '6px',
-          padding: '6px 8px',
-          font: 'inherit',
-          fontSize: '13px',
-          color: 'inherit',
-          background: 'var(--platform-colors-surface, #fff)',
-        })
-        popover.appendChild(textarea)
-
-        const rect = dom.getBoundingClientRect()
-        popover.style.left = `${Math.max(12, rect.left)}px`
-        popover.style.top = `${rect.bottom + 6}px`
-        document.body.appendChild(popover)
-        textarea.focus()
-
-        const commit = (): void => {
-          if (typeof getPos !== 'function') return
-          const pos = getPos()
-          if (typeof pos !== 'number') return
-          const next = textarea.value
-          if (next === (current.attrs.text ?? '')) return
-          editor.view.dispatch(
-            editor.state.tr.setNodeMarkup(pos, undefined, {
-              ...current.attrs,
-              text: next,
-            }),
-          )
-        }
-        textarea.addEventListener('blur', () => {
-          commit()
-          closePopover()
-        })
-        textarea.addEventListener('keydown', event => {
-          if (event.key === 'Escape') {
-            event.preventDefault()
-            commit()
-            closePopover()
-            editor.commands.focus()
-          }
-        })
-        document.addEventListener('mousedown', onDocPointerDown, true)
-      }
-
-      dom.addEventListener('mousedown', event => {
-        event.preventDefault()
-        openPopover()
-      })
-
-      return {
-        dom,
-        update: updated => {
-          if (updated.type.name !== 'footnote') return false
-          current = updated
-          renderNumber()
-          return true
-        },
-        ignoreMutation: () => true,
-        destroy: closePopover,
-      }
-    }
-  },
-})
+import { Node, mergeAttributes } from '@tiptap/core'
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    footnote: {
+      /** Insert an empty footnote marker at the cursor and open it to edit. */
+      insertFootnote: () => ReturnType
+    }
+  }
+}
+
+/**
+ * Footnote — an inline, atomic reference marker.
+ *
+ * The body shows only a small superscript number; the note text is embedded on
+ * the node (the `text` attribute) and edited in a popover when the marker is
+ * clicked. Numbering is by document order, recomputed live. Serializes to
+ * `<sup data-footnote data-text="…">` for a clean HTML round-trip; the export
+ * pipeline (prepareFootnotes) turns markers into numbered links plus a
+ * footnotes section.
+ */
+export const Footnote = Node.create({
+  name: 'footnote',
+  group: 'inline',
+  inline: true,
+  atom: true,
+  selectable: true,
+
+  addAttributes() {
+    return {
+      text: {
+        default: '',
+        parseHTML: el => el.getAttribute('data-text') ?? '',
+        renderHTML: (attrs: { text?: string }) => ({
+          'data-text': attrs.text ?? '',
+        }),
+      },
+    }
+  },
+
+  parseHTML() {
+    return [{ tag: 'sup[data-footnote]' }]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return [
+      'sup',
+      mergeAttributes(HTMLAttributes, {
+        'data-footnote': '',
+        class: 'footnote-ref',
+      }),
+    ]
+  },
+
+  addCommands() {
+    return {
+      insertFootnote:
+        () =>
+        ({ commands }) =>
+          commands.insertContent({ type: this.name, attrs: { text: '' } }),
+    }
+  },
+
+  addNodeView() {
+    return ({ node, getPos, editor }) => {
+      let current = node
+      const dom = document.createElement('sup')
+      dom.className = 'footnote-ref'
+      dom.setAttribute('data-footnote', '')
+      dom.contentEditable = 'false'
+
+      const renderNumber = (): void => {
+        let count = 0
+        let mine = 0
+        const here = typeof getPos === 'function' ? getPos() : null
+        editor.state.doc.descendants((child, pos) => {
+          if (child.type.name === 'footnote') {
+            count += 1
+            if (here !== null && pos === here) mine = count
+          }
+          return true
+        })
+        dom.textContent = String(mine || count || 1)
+      }
+      renderNumber()
+
+      let popover: HTMLDivElement | null = null
+      const closePopover = (): void => {
+        popover?.remove()
+        popover = null
+        document.removeEventListener('mousedown', onDocPointerDown, true)
+      }
+      const onDocPointerDown = (event: MouseEvent): void => {
+        if (
+          popover &&
+          event.target !== dom &&
+          !popover.contains(event.target as globalThis.Node)
+        ) {
+          closePopover()
+        }
+      }
+      const openPopover = (): void => {
+        if (popover) return
+        popover = document.createElement('div')
+        popover.className = 'footnote-popover'
+        Object.assign(popover.style, {
+          position: 'fixed',
+          zIndex: '1002',
+          width: 'min(360px, calc(100vw - 24px))',
+          padding: '8px',
+          border: '1px solid var(--platform-colors-border, #d7dbe0)',
+          borderRadius: '8px',
+          background: 'var(--platform-colors-surface, #fff)',
+          boxShadow: '0 18px 42px rgb(23 29 36 / 0.18)',
+        })
+        const textarea = document.createElement('textarea')
+        textarea.value = current.attrs.text ?? ''
+        textarea.placeholder = 'Footnote text…'
+        textarea.rows = 3
+        Object.assign(textarea.style, {
+          width: '100%',
+          boxSizing: 'border-box',
+          resize: 'vertical',
+          border: '1px solid var(--platform-colors-border, #d7dbe0)',
+          borderRadius: '6px',
+          padding: '6px 8px',
+          font: 'inherit',
+          fontSize: '13px',
+          color: 'inherit',
+          background: 'var(--platform-colors-surface, #fff)',
+        })
+        popover.appendChild(textarea)
+
+        const rect = dom.getBoundingClientRect()
+        popover.style.left = `${Math.max(12, rect.left)}px`
+        popover.style.top = `${rect.bottom + 6}px`
+        document.body.appendChild(popover)
+        textarea.focus()
+
+        const commit = (): void => {
+          if (typeof getPos !== 'function') return
+          const pos = getPos()
+          if (typeof pos !== 'number') return
+          const next = textarea.value
+          if (next === (current.attrs.text ?? '')) return
+          editor.view.dispatch(
+            editor.state.tr.setNodeMarkup(pos, undefined, {
+              ...current.attrs,
+              text: next,
+            }),
+          )
+        }
+        textarea.addEventListener('blur', () => {
+          commit()
+          closePopover()
+        })
+        textarea.addEventListener('keydown', event => {
+          if (event.key === 'Escape') {
+            event.preventDefault()
+            commit()
+            closePopover()
+            editor.commands.focus()
+          }
+        })
+        document.addEventListener('mousedown', onDocPointerDown, true)
+      }
+
+      dom.addEventListener('mousedown', event => {
+        event.preventDefault()
+        openPopover()
+      })
+
+      return {
+        dom,
+        update: updated => {
+          if (updated.type.name !== 'footnote') return false
+          current = updated
+          renderNumber()
+          return true
+        },
+        ignoreMutation: () => true,
+        destroy: closePopover,
+      }
+    }
+  },
+})