@ceedcv-maya/shared-editor-react 0.6.0

package/src/components/EditorToolbarGroups.tsx

@@ -0,0 +1,401 @@
+/**
+ * EditorToolbar button groups extracted into focused subcomponents.
+ * Each group handles a logically distinct set of formatting or block operations.
+ */
+import type { Editor } from '@tiptap/react';
+import type { ToolbarLabels } from './EditorToolbar';
+import { ColorPicker } from './ColorPicker';
+import { Btn } from './EditorToolbarButton';
+
+export interface ToolbarGroupProps {
+  editor: Editor;
+  labels: ToolbarLabels;
+}
+
+/**
+ * Basic formatting: bold, italic, underline, code, link.
+ * Always visible, even in lite mode.
+ */
+export function FormattingButtons({ editor, labels: L }: ToolbarGroupProps) {
+  const setLink = () => {
+    const prev = editor.getAttributes('link').href as string | undefined;
+    const url = window.prompt(L.linkPrompt, prev ?? '');
+    if (url === null) return;
+    if (url === '') {
+      editor.chain().focus().unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange('link').setLink({ href: url }).run();
+  };
+
+  return (
+    <>
+      <Btn
+        active={editor.isActive('bold')}
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        title={L.bold}
+      >
+        <strong>B</strong>
+      </Btn>
+      <Btn
+        active={editor.isActive('italic')}
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        title={L.italic}
+      >
+        <em>I</em>
+      </Btn>
+      <Btn
+        active={editor.isActive('underline')}
+        onClick={() => editor.chain().focus().toggleUnderline().run()}
+        title={L.underline}
+      >
+        <u>U</u>
+      </Btn>
+      <Btn
+        active={editor.isActive('code')}
+        onClick={() => editor.chain().focus().toggleCode().run()}
+        title={L.code}
+      >
+        {'</>'}
+      </Btn>
+      <Btn active={editor.isActive('link')} onClick={setLink} title={L.link}>
+        🔗
+      </Btn>
+    </>
+  );
+}
+
+/**
+ * Advanced formatting: strikethrough, text color, highlight color.
+ */
+export function AdvancedFormattingButtons({ editor, labels: L }: ToolbarGroupProps) {
+  return (
+    <>
+      <Btn
+        active={editor.isActive('strike')}
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        title={L.strike}
+      >
+        <s>S</s>
+      </Btn>
+
+      <ColorPicker
+        title={L.textColor}
+        value={(editor.getAttributes('textStyle').color as string | undefined) ?? null}
+        glyph={<span style={{ fontWeight: 700 }}>A</span>}
+        clearLabel={L.colorDefault}
+        onSelect={(c) => {
+          if (c === null) editor.chain().focus().unsetColor().run();
+          else editor.chain().focus().setColor(c).run();
+        }}
+      />
+      <ColorPicker
+        title={L.backgroundColor}
+        value={(editor.getAttributes('highlight').color as string | undefined) ?? null}
+        glyph={<span style={{ fontWeight: 700 }}>▮</span>}
+        clearLabel={L.colorDefault}
+        onSelect={(c) => {
+          if (c === null) editor.chain().focus().unsetHighlight().run();
+          else editor.chain().focus().setHighlight({ color: c }).run();
+        }}
+      />
+    </>
+  );
+}
+
+/**
+ * Text alignment buttons: left, center, right, justify.
+ */
+export function AlignmentButtons({ editor, labels: L }: ToolbarGroupProps) {
+  return (
+    <>
+      <Btn
+        active={editor.isActive({ textAlign: 'left' })}
+        onClick={() => editor.chain().focus().setTextAlign('left').run()}
+        title={L.alignLeft}
+      >
+        ⬱
+      </Btn>
+      <Btn
+        active={editor.isActive({ textAlign: 'center' })}
+        onClick={() => editor.chain().focus().setTextAlign('center').run()}
+        title={L.alignCenter}
+      >
+        ☱
+      </Btn>
+      <Btn
+        active={editor.isActive({ textAlign: 'right' })}
+        onClick={() => editor.chain().focus().setTextAlign('right').run()}
+        title={L.alignRight}
+      >
+        ⬲
+      </Btn>
+      <Btn
+        active={editor.isActive({ textAlign: 'justify' })}
+        onClick={() => editor.chain().focus().setTextAlign('justify').run()}
+        title={L.alignJustify}
+      >
+        ☰
+      </Btn>
+    </>
+  );
+}
+
+/**
+ * Indentation buttons: indent (increase nesting) and outdent (decrease nesting).
+ */
+export function IndentButtons({ editor, labels: L }: ToolbarGroupProps) {
+  return (
+    <>
+      <Btn
+        onClick={() => {
+          if (editor.isActive('listItem') || editor.isActive('taskItem')) {
+            editor.chain().focus().sinkListItem(
+              editor.isActive('taskItem') ? 'taskItem' : 'listItem',
+            ).run();
+          } else {
+            editor.chain().focus().indent().run();
+          }
+        }}
+        title={L.indent}
+      >
+        ⇥
+      </Btn>
+      <Btn
+        onClick={() => {
+          if (editor.isActive('listItem') || editor.isActive('taskItem')) {
+            editor.chain().focus().liftListItem(
+              editor.isActive('taskItem') ? 'taskItem' : 'listItem',
+            ).run();
+          } else {
+            editor.chain().focus().outdent().run();
+          }
+        }}
+        title={L.outdent}
+      >
+        ⇤
+      </Btn>
+    </>
+  );
+}
+
+/**
+ * Heading levels: H1, H2, H3.
+ */
+export function HeadingButtons({ editor, labels: L }: ToolbarGroupProps) {
+  return (
+    <>
+      <Btn
+        active={editor.isActive('heading', { level: 1 })}
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        title={L.heading1}
+      >
+        H1
+      </Btn>
+      <Btn
+        active={editor.isActive('heading', { level: 2 })}
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        title={L.heading2}
+      >
+        H2
+      </Btn>
+      <Btn
+        active={editor.isActive('heading', { level: 3 })}
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+        title={L.heading3}
+      >
+        H3
+      </Btn>
+    </>
+  );
+}
+
+/**
+ * List and block buttons: bullet list, ordered list, task list, blockquote, code block, horizontal rule.
+ */
+export function ListAndBlockButtons({ editor, labels: L }: ToolbarGroupProps) {
+  return (
+    <>
+      <Btn
+        active={editor.isActive('bulletList')}
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        title={L.bulletList}
+      >
+        • —
+      </Btn>
+      <Btn
+        active={editor.isActive('orderedList')}
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        title={L.orderedList}
+      >
+        1.
+      </Btn>
+      <Btn
+        active={editor.isActive('taskList')}
+        onClick={() => editor.chain().focus().toggleTaskList().run()}
+        title={L.taskList}
+      >
+        ☑
+      </Btn>
+      <Btn
+        active={editor.isActive('blockquote')}
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        title={L.blockquote}
+      >
+        ❝
+      </Btn>
+      <Btn
+        active={editor.isActive('codeBlock')}
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        title={L.codeBlock}
+      >
+        {'{}'}
+      </Btn>
+      <Btn
+        onClick={() => editor.chain().focus().setHorizontalRule().run()}
+        title={L.horizontalRule}
+      >
+        —
+      </Btn>
+    </>
+  );
+}
+
+/**
+ * Table and media buttons: insert table, iframe, and optional image upload.
+ */
+export interface TableAndMediaButtonsProps extends ToolbarGroupProps {
+  onImage?: () => void;
+}
+
+export function TableAndMediaButtons({
+  editor,
+  labels: L,
+  onImage,
+}: TableAndMediaButtonsProps) {
+  const setIframe = () => {
+    const url = window.prompt(L.iframePrompt, '');
+    if (!url) return;
+    editor.chain().focus().setIframe({ src: url }).run();
+  };
+
+  return (
+    <>
+      <Btn
+        onClick={() =>
+          editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+        }
+        title={L.table}
+      >
+        ⊞
+      </Btn>
+      <Btn onClick={setIframe} title={L.iframe}>
+        🖽
+      </Btn>
+      {onImage && (
+        <Btn onClick={onImage} title={L.uploadImage}>
+          🖼
+        </Btn>
+      )}
+    </>
+  );
+}
+
+/**
+ * Import/export and document buttons: Word import/export, comments, find.
+ */
+export interface DocumentButtonsProps extends ToolbarGroupProps {
+  onImportDocx?: () => void;
+  onExportDocx?: () => void;
+  onAddComment?: () => void;
+  onToggleFind?: () => void;
+}
+
+export function DocumentButtons({
+  editor,
+  labels: L,
+  onImportDocx,
+  onExportDocx,
+  onAddComment,
+  onToggleFind,
+}: DocumentButtonsProps) {
+  return (
+    <>
+      {onImportDocx && (
+        <Btn onClick={onImportDocx} title={L.importDocx}>
+          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>↥W</span>
+        </Btn>
+      )}
+      {onExportDocx && (
+        <Btn onClick={onExportDocx} title={L.exportDocx}>
+          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>↧W</span>
+        </Btn>
+      )}
+      {onAddComment && (
+        <Btn
+          onClick={onAddComment}
+          disabled={editor.state.selection.empty}
+          title={L.addComment}
+        >
+          💬
+        </Btn>
+      )}
+      {onToggleFind && (
+        <Btn onClick={onToggleFind} title={L.find}>
+          🔍
+        </Btn>
+      )}
+    </>
+  );
+}
+
+/**
+ * View mode buttons: HTML, Markdown, Fullscreen toggle.
+ */
+export interface ViewModeButtonsProps extends ToolbarGroupProps {
+  viewMode?: 'wysiwyg' | 'html' | 'markdown';
+  isFullscreen?: boolean;
+  onInsertHtml?: () => void;
+  onInsertMarkdown?: () => void;
+  onToggleFullscreen?: () => void;
+}
+
+export function ViewModeButtons({
+  labels: L,
+  viewMode = 'wysiwyg',
+  isFullscreen,
+  onInsertHtml,
+  onInsertMarkdown,
+  onToggleFullscreen,
+}: ViewModeButtonsProps) {
+  return (
+    <>
+      {onInsertMarkdown && (
+        <Btn
+          onClick={onInsertMarkdown}
+          title={L.insertMarkdown}
+          active={viewMode === 'markdown'}
+        >
+          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>md</span>
+        </Btn>
+      )}
+      {onInsertHtml && (
+        <Btn
+          onClick={onInsertHtml}
+          title={L.insertHtml}
+          active={viewMode === 'html'}
+        >
+          <span style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11 }}>{'<>'}</span>
+        </Btn>
+      )}
+      {onToggleFullscreen && (
+        <Btn
+          onClick={onToggleFullscreen}
+          title={isFullscreen ? L.exitFullscreen : L.fullscreen}
+        >
+          {isFullscreen ? '⤓' : '⛶'}
+        </Btn>
+      )}
+    </>
+  );
+}

package/src/components/FindReplaceBar.tsx

@@ -0,0 +1,253 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+
+interface FindReplaceBarProps {
+  editor: Editor;
+  open: boolean;
+  onClose: () => void;
+  labels: {
+    findPlaceholder: string;
+    replacePlaceholder: string;
+    findNext: string;
+    findPrev: string;
+    replace: string;
+    replaceAll: string;
+    close: string;
+    caseSensitive: string;
+    count: (current: number, total: number) => string;
+    none: string;
+    replacedCount: (n: number) => string;
+  };
+}
+
+interface Match {
+  from: number;
+  to: number;
+}
+
+/**
+ * Inline find/replace bar that sits under the toolbar (mode=full).
+ *
+ * Implementation:
+ *   - Walks the editor's text content with `state.doc.descendants`,
+ *     collecting `(from, to)` ranges that match the needle.
+ *   - "Find next/prev" sets the editor selection to the matched range
+ *     and scrolls it into view.
+ *   - "Replace" replaces the active range; "Replace all" walks the list
+ *     in reverse (so earlier offsets stay valid) and applies each one.
+ *   - Recomputes the match list on doc changes via the editor `update`
+ *     event so navigation stays consistent after replacements.
+ */
+export function FindReplaceBar({ editor, open, onClose, labels }: FindReplaceBarProps) {
+  const [needle, setNeedle] = useState('');
+  const [replacement, setReplacement] = useState('');
+  const [caseSensitive, setCaseSensitive] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [matches, setMatches] = useState<Match[]>([]);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // Pre-load the input with the current selection when the bar opens.
+  useEffect(() => {
+    if (!open) return;
+    const { from, to } = editor.state.selection;
+    if (to > from) {
+      setNeedle(editor.state.doc.textBetween(from, to, ' '));
+    }
+    const t = setTimeout(() => inputRef.current?.focus(), 0);
+    return () => clearTimeout(t);
+  }, [open, editor]);
+
+  const findMatches = useCallback(
+    (q: string, cs: boolean): Match[] => {
+      if (!q) return [];
+      const target = cs ? q : q.toLowerCase();
+      const found: Match[] = [];
+      editor.state.doc.descendants((node, pos) => {
+        if (!node.isText || !node.text) return;
+        const haystack = cs ? node.text : node.text.toLowerCase();
+        let idx = 0;
+        while ((idx = haystack.indexOf(target, idx)) !== -1) {
+          found.push({ from: pos + idx, to: pos + idx + q.length });
+          idx += q.length;
+        }
+      });
+      return found;
+    },
+    [editor],
+  );
+
+  // Recompute on every editor update so concurrent edits don't desync.
+  useEffect(() => {
+    if (!open) return;
+    const refresh = () => setMatches(findMatches(needle, caseSensitive));
+    refresh();
+    editor.on('update', refresh);
+    return () => {
+      editor.off('update', refresh);
+    };
+  }, [open, editor, needle, caseSensitive, findMatches]);
+
+  useEffect(() => {
+    if (activeIndex >= matches.length) setActiveIndex(Math.max(0, matches.length - 1));
+  }, [matches.length, activeIndex]);
+
+  const focusMatch = useCallback(
+    (idx: number) => {
+      const m = matches[idx];
+      if (!m) return;
+      editor.chain().setTextSelection({ from: m.from, to: m.to }).scrollIntoView().run();
+    },
+    [editor, matches],
+  );
+
+  const goNext = useCallback(() => {
+    if (matches.length === 0) return;
+    const next = (activeIndex + 1) % matches.length;
+    setActiveIndex(next);
+    focusMatch(next);
+  }, [matches.length, activeIndex, focusMatch]);
+
+  const goPrev = useCallback(() => {
+    if (matches.length === 0) return;
+    const next = (activeIndex - 1 + matches.length) % matches.length;
+    setActiveIndex(next);
+    focusMatch(next);
+  }, [matches.length, activeIndex, focusMatch]);
+
+  const replaceOne = useCallback(() => {
+    const m = matches[activeIndex];
+    if (!m) return;
+    editor
+      .chain()
+      .focus()
+      .setTextSelection({ from: m.from, to: m.to })
+      .insertContent(replacement)
+      .run();
+  }, [editor, matches, activeIndex, replacement]);
+
+  const replaceAll = useCallback(() => {
+    if (matches.length === 0) return;
+    // Apply from the end so earlier (from, to) ranges remain valid.
+    const tr = editor.state.tr;
+    const sorted = [...matches].sort((a, b) => b.from - a.from);
+    for (const m of sorted) {
+      tr.insertText(replacement, m.from, m.to);
+    }
+    editor.view.dispatch(tr);
+  }, [editor, matches, replacement]);
+
+  const handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      e.shiftKey ? goPrev() : goNext();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      onClose();
+    }
+  };
+
+  const counter = useMemo(() => {
+    if (!needle) return '';
+    if (matches.length === 0) return labels.none;
+    return labels.count(activeIndex + 1, matches.length);
+  }, [needle, matches, activeIndex, labels]);
+
+  if (!open) return null;
+
+  return (
+    <div className="maya-editor-find" role="search" aria-label="Find and replace">
+      <div className="maya-editor-find__row">
+        <input
+          ref={inputRef}
+          type="text"
+          className="maya-editor-find__input"
+          placeholder={labels.findPlaceholder}
+          value={needle}
+          onChange={(e) => setNeedle(e.target.value)}
+          onKeyDown={handleKey}
+        />
+        <span className="maya-editor-find__counter" aria-live="polite">
+          {counter}
+        </span>
+        <button
+          type="button"
+          className="maya-editor-toolbar__btn"
+          onClick={goPrev}
+          disabled={matches.length === 0}
+          title={labels.findPrev}
+          aria-label={labels.findPrev}
+        >
+          ‹
+        </button>
+        <button
+          type="button"
+          className="maya-editor-toolbar__btn"
+          onClick={goNext}
+          disabled={matches.length === 0}
+          title={labels.findNext}
+          aria-label={labels.findNext}
+        >
+          ›
+        </button>
+        <label
+          className={`maya-editor-toolbar__btn${caseSensitive ? ' is-active' : ''}`}
+          title={labels.caseSensitive}
+        >
+          <input
+            type="checkbox"
+            className="maya-editor-find__hidden"
+            checked={caseSensitive}
+            onChange={(e) => setCaseSensitive(e.target.checked)}
+          />
+          Aa
+        </label>
+        <button
+          type="button"
+          className="maya-editor-toolbar__btn"
+          onClick={onClose}
+          title={labels.close}
+          aria-label={labels.close}
+        >
+          ✕
+        </button>
+      </div>
+      <div className="maya-editor-find__row">
+        <input
+          type="text"
+          className="maya-editor-find__input"
+          placeholder={labels.replacePlaceholder}
+          value={replacement}
+          onChange={(e) => setReplacement(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              replaceOne();
+              goNext();
+            } else if (e.key === 'Escape') {
+              e.preventDefault();
+              onClose();
+            }
+          }}
+        />
+        <button
+          type="button"
+          className="maya-editor-toolbar__btn"
+          onClick={replaceOne}
+          disabled={matches.length === 0}
+          title={labels.replace}
+        >
+          {labels.replace}
+        </button>
+        <button
+          type="button"
+          className="maya-editor-toolbar__btn"
+          onClick={replaceAll}
+          disabled={matches.length === 0}
+          title={labels.replaceAll}
+        >
+          {labels.replaceAll}
+        </button>
+      </div>
+    </div>
+  );
+}