@bendyline/squisq-editor-react 1.4.0 → 1.5.1

package/src/styles/image-edit-affordance.css

@@ -0,0 +1,201 @@
+/**
+ * Image edit affordance + modal overlay.
+ *
+ * The affordance is the small floating "Edit" button that appears on
+ * hovered/selected images inside the WYSIWYG view. The modal hosts a
+ * full <ImageEditor> on top of the editor surface.
+ */
+
+.squisq-image-edit-affordance {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  font: 500 12px/1.2 var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
+  /* Theme-tied colors. The shell sets `--squisq-editor-*` tokens (or
+     equivalents via [data-theme]) on the WYSIWYG root; we fall back to
+     a neutral light surface so the button is legible on photographic
+     content even when no theme variables are set. The dark-theme block
+     below overrides for [data-theme='dark']. */
+  color: var(--squisq-editor-text, #1f2937);
+  background: var(--squisq-editor-control-bg, rgba(255, 255, 255, 0.92));
+  border: 1px solid var(--squisq-editor-control-border, rgba(0, 0, 0, 0.18));
+  border-radius: 4px;
+  cursor: pointer;
+  z-index: 4;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+  user-select: none;
+  backdrop-filter: blur(4px);
+}
+
+.squisq-image-edit-affordance:hover {
+  background: var(--squisq-editor-control-bg-hover, rgba(245, 245, 247, 0.98));
+}
+
+.squisq-image-edit-affordance:focus-visible {
+  outline: 2px solid var(--squisq-editor-accent, #4a9eff);
+  outline-offset: 2px;
+}
+
+[data-theme='dark'] .squisq-image-edit-affordance,
+.squisq-editor-shell[data-theme='dark'] .squisq-image-edit-affordance {
+  color: var(--squisq-editor-text, #f3f4f6);
+  background: var(--squisq-editor-control-bg, rgba(20, 20, 20, 0.85));
+  border-color: var(--squisq-editor-control-border, rgba(255, 255, 255, 0.2));
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+}
+
+[data-theme='dark'] .squisq-image-edit-affordance:hover,
+.squisq-editor-shell[data-theme='dark'] .squisq-image-edit-affordance:hover {
+  background: var(--squisq-editor-control-bg-hover, rgba(45, 45, 45, 0.95));
+}
+
+/* ── Resize handle ──────────────────────────────────────────────
+   Small grip at the bottom-right corner of a hovered/selected image.
+   Mousedown starts an aspect-locked resize; double-click clears the
+   width/height attrs (returns image to natural rendered size). */
+.squisq-image-resize-handle {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid var(--squisq-editor-accent, #4a9eff);
+  background: var(--squisq-editor-control-bg, rgba(255, 255, 255, 0.95));
+  border-radius: 2px;
+  cursor: nwse-resize;
+  z-index: 5;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
+  user-select: none;
+  touch-action: none;
+}
+
+.squisq-image-resize-handle:hover {
+  background: var(--squisq-editor-accent, #4a9eff);
+}
+
+[data-theme='dark'] .squisq-image-resize-handle,
+.squisq-editor-shell[data-theme='dark'] .squisq-image-resize-handle {
+  background: var(--squisq-editor-control-bg, rgba(20, 20, 20, 0.9));
+}
+
+.squisq-image-resize-readout {
+  position: absolute;
+  left: 8px;
+  bottom: 8px;
+  padding: 2px 6px;
+  font: 500 11px/1.2 var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
+  color: var(--squisq-editor-text, #fff);
+  background: rgba(0, 0, 0, 0.7);
+  border-radius: 3px;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.squisq-image-edit-modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.55);
+  z-index: 1000;
+  padding: 24px;
+}
+
+.squisq-image-edit-modal__surface {
+  display: flex;
+  flex-direction: column;
+  width: min(1200px, 100%);
+  height: min(800px, 100%);
+  background: #fff;
+  border-radius: 6px;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
+  overflow: hidden;
+}
+
+[data-theme='dark'] .squisq-image-edit-modal__surface,
+.squisq-editor-shell[data-theme='dark'] .squisq-image-edit-modal__surface {
+  background: #1e1e1e;
+  color: #e4e4e4;
+}
+
+.squisq-image-edit-modal__header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-bottom: 1px solid #d4d4d4;
+  font: 500 13px/1.2 var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
+  background: #f5f5f5;
+}
+
+[data-theme='dark'] .squisq-image-edit-modal__header {
+  background: #2a2a2a;
+  border-bottom-color: #3a3a3a;
+}
+
+.squisq-image-edit-modal__title {
+  font-weight: 600;
+}
+
+.squisq-image-edit-modal__path {
+  flex: 1;
+  color: #666;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+[data-theme='dark'] .squisq-image-edit-modal__path {
+  color: #aaa;
+}
+
+.squisq-image-edit-modal__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 22px;
+  line-height: 1;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  cursor: pointer;
+  color: inherit;
+}
+
+.squisq-image-edit-modal__close:hover {
+  background: rgba(0, 0, 0, 0.07);
+}
+
+[data-theme='dark'] .squisq-image-edit-modal__close:hover {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.squisq-image-edit-modal__body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.squisq-image-edit-modal__loading,
+.squisq-image-edit-modal__error {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: 500 13px var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
+  color: #666;
+}
+
+.squisq-image-edit-modal__error {
+  color: #c0392b;
+}

package/src/styles/index.css

@@ -0,0 +1,10 @@
+/**
+ * @bendyline/squisq-editor-react — bundled stylesheet entry.
+ * Aggregates all CSS shipped with this package.
+ */
+
+@import '@fortawesome/fontawesome-free/css/all.min.css';
+@import './editor.css';
+@import '../jsonEditor/json-editor.css';
+@import '../imageEditor/image-editor.css';
+@import './image-edit-affordance.css';

package/src/tiptap/TiptapAudio.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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

@@ -0,0 +1,119 @@
+/**
+ * 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

@@ -0,0 +1,47 @@
+/**
+ * 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;
+}