@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/tiptap/TiptapAudio.tsx

@@ -1,86 +0,0 @@
-/**
- * TiptapAudio — inline atom Tiptap node for HTML5 `<audio>` elements.
- *
- * Lets the WYSIWYG editor preserve `<audio>` tags that the recorder
- * drops into the markdown for narration / voice recordings, and render
- * a native playback control inside the editor surface. The resolved src
- * goes through the EditorContext's MediaProvider so a workspace-local
- * `audio/foo.webm` returns a blob URL.
- */
-import { Node, mergeAttributes } from '@tiptap/core';
-import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
-import type { NodeViewProps } from '@tiptap/react';
-import { useResolvedMediaSrc } from './useResolvedMediaSrc.js';
-
-export interface TiptapAudioOptions {
-  HTMLAttributes: Record<string, unknown>;
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    audio: {
-      setAudio: (attrs: { src: string; controls?: boolean }) => ReturnType;
-    };
-  }
-}
-
-function AudioNodeView({ node }: NodeViewProps) {
-  const { src, controls } = node.attrs as { src: string; controls: boolean };
-  const resolvedSrc = useResolvedMediaSrc(src ?? '');
-
-  return (
-    <NodeViewWrapper as="span" className="squisq-inline-audio-player" data-drag-handle draggable>
-      <audio src={resolvedSrc || undefined} controls={controls} preload="metadata" />
-    </NodeViewWrapper>
-  );
-}
-
-export const TiptapAudio = Node.create<TiptapAudioOptions>({
-  name: 'audio',
-  // Block-level so each recording lives on its own line in the WYSIWYG —
-  // matches how the recorder inserts the tag (on a fresh line) and
-  // avoids odd inline-flow alignment when the native controls take more
-  // vertical space than a line of text.
-  group: 'block',
-  atom: true,
-  draggable: true,
-  selectable: true,
-
-  addOptions() {
-    return { HTMLAttributes: {} };
-  },
-
-  addAttributes() {
-    return {
-      src: { default: null },
-      controls: {
-        default: true,
-        parseHTML: (el) => el.hasAttribute('controls'),
-        renderHTML: (attrs) => (attrs.controls ? { controls: '' } : {}),
-      },
-    };
-  },
-
-  parseHTML() {
-    return [{ tag: 'audio' }];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['audio', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(AudioNodeView);
-  },
-
-  addCommands() {
-    return {
-      setAudio:
-        (attrs) =>
-        ({ commands }) =>
-          commands.insertContent({ type: this.name, attrs }),
-    };
-  },
-});
-
-export default TiptapAudio;

package/src/tiptap/TiptapVideo.tsx

@@ -1,119 +0,0 @@
-/**
- * TiptapVideo — block-level atom Tiptap node for HTML5 `<video>` elements.
- *
- * Without this extension, Tiptap's StarterKit strips unknown HTML tags
- * when parsing the editor's content. By registering `<video>` as a known
- * node, the editor can render a recording's inline player inside the
- * WYSIWYG surface and round-trip the tag through markdown.
- *
- * The NodeView renders a real `<video controls>` whose src is resolved
- * through the EditorContext's MediaProvider — same mechanism
- * `ImageNodeView` uses for `<img>`.
- */
-import { Node, mergeAttributes } from '@tiptap/core';
-import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
-import type { NodeViewProps } from '@tiptap/react';
-import { useResolvedMediaSrc } from './useResolvedMediaSrc.js';
-
-export interface TiptapVideoOptions {
-  HTMLAttributes: Record<string, unknown>;
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    video: {
-      setVideo: (attrs: {
-        src: string;
-        width?: number | string | null;
-        controls?: boolean;
-      }) => ReturnType;
-    };
-  }
-}
-
-function VideoNodeView({ node }: NodeViewProps) {
-  const { src, width, height, poster, controls } = node.attrs as {
-    src: string;
-    width: string | number | null;
-    height: string | number | null;
-    poster: string | null;
-    controls: boolean;
-  };
-  const resolvedSrc = useResolvedMediaSrc(src ?? '');
-  // Resolve poster through the same provider when present so a
-  // workspace-local frame thumbnail also renders inside the editor.
-  const resolvedPoster = useResolvedMediaSrc(poster ?? '');
-
-  return (
-    <NodeViewWrapper
-      as="span"
-      className="squisq-inline-video-player"
-      // Mark as a drag handle so ProseMirror moves the node when the user
-      // drags it, rather than the browser starting a native media-drag.
-      data-drag-handle
-      draggable
-    >
-      <video
-        src={resolvedSrc || undefined}
-        poster={poster ? resolvedPoster : undefined}
-        controls={controls}
-        playsInline
-        preload="metadata"
-        width={width ?? undefined}
-        height={height ?? undefined}
-      />
-    </NodeViewWrapper>
-  );
-}
-
-export const TiptapVideo = Node.create<TiptapVideoOptions>({
-  name: 'video',
-  group: 'block',
-  atom: true,
-  draggable: true,
-  selectable: true,
-
-  addOptions() {
-    return { HTMLAttributes: {} };
-  },
-
-  addAttributes() {
-    return {
-      src: { default: null },
-      width: { default: null },
-      height: { default: null },
-      poster: { default: null },
-      // The HTML5 `controls` attribute is boolean-presence; parse its
-      // existence (even with an empty string value) as `true`, otherwise
-      // default to true (we want recordings to be playable by default).
-      controls: {
-        default: true,
-        parseHTML: (el) => el.hasAttribute('controls'),
-        renderHTML: (attrs) => (attrs.controls ? { controls: '' } : {}),
-      },
-    };
-  },
-
-  parseHTML() {
-    return [{ tag: 'video' }];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ['video', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)];
-  },
-
-  addNodeView() {
-    return ReactNodeViewRenderer(VideoNodeView);
-  },
-
-  addCommands() {
-    return {
-      setVideo:
-        (attrs) =>
-        ({ commands }) =>
-          commands.insertContent({ type: this.name, attrs }),
-    };
-  },
-});
-
-export default TiptapVideo;

package/src/tiptap/useResolvedMediaSrc.ts

@@ -1,47 +0,0 @@
-/**
- * useResolvedMediaSrc — resolve a relative media path through the
- * EditorContext's MediaProvider, mirroring the pattern used by
- * `ImageNodeView`. Returns the resolved URL (or the original `src`
- * when no provider is available, the path is absolute, or resolution
- * fails). Used by the Tiptap video / audio NodeViews so a relative
- * `audio/foo.webm` plays from the workspace container instead of
- * 404-ing against the dev server.
- */
-import { useEffect, useState } from 'react';
-import { useEditorContext } from '../EditorContext.js';
-
-export function useResolvedMediaSrc(src: string): string {
-  const { mediaProvider, mediaRevision } = useEditorContext();
-  const [resolved, setResolved] = useState(src);
-
-  const isRelative =
-    !!src &&
-    !src.startsWith('blob:') &&
-    !src.startsWith('http:') &&
-    !src.startsWith('https:') &&
-    !src.startsWith('data:') &&
-    !src.startsWith('/');
-
-  useEffect(() => {
-    if (!mediaProvider || !isRelative) {
-      setResolved(src);
-      return;
-    }
-    let cancelled = false;
-    mediaProvider.resolveUrl(src).then(
-      (url) => {
-        if (!cancelled) setResolved(url);
-      },
-      () => {
-        if (!cancelled) setResolved(src);
-      },
-    );
-    return () => {
-      cancelled = true;
-    };
-    // `mediaRevision` bumps after writes — re-resolve so the player
-    // picks up the new blob URL after a re-record / edit.
-  }, [src, isRelative, mediaProvider, mediaRevision]);
-
-  return resolved;
-}