@bygghammar/cms-platform 0.4.0 → 0.6.0

package/src/backoffice/RichTextEditor.tsx

@@ -0,0 +1,633 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { EditorContent, useEditor, type Editor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Image from "@tiptap/extension-image";
+import TextAlign from "@tiptap/extension-text-align";
+import Highlight from "@tiptap/extension-highlight";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { Placeholder } from "@tiptap/extensions";
+import { Color, FontFamily, FontSize, LineHeight, TextStyle } from "@tiptap/extension-text-style";
+import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table";
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Code,
+  Code2,
+  Eraser,
+  Image as ImageIcon,
+  Italic,
+  Link as LinkIcon,
+  List,
+  ListOrdered,
+  Minus,
+  Quote,
+  Redo2,
+  Strikethrough,
+  Subscript as SubIcon,
+  Superscript as SupIcon,
+  Table as TableIcon,
+  Underline as UnderlineIcon,
+  Undo2,
+  Unlink,
+} from "lucide-react";
+import { MediaPickerDialog } from "./inspectors/fields";
+import { sanitizeHtml } from "../html/sanitize-html";
+
+const FONTS: { label: string; value: string }[] = [
+  { label: "Theme (default)", value: "" },
+  { label: "Serif (display)", value: "var(--font-serif)" },
+  { label: "Sans (body)", value: "var(--font-sans)" },
+  { label: "Georgia", value: "Georgia, serif" },
+  { label: "Times New Roman", value: "'Times New Roman', serif" },
+  { label: "Helvetica", value: "Helvetica, Arial, sans-serif" },
+  { label: "Arial", value: "Arial, sans-serif" },
+  { label: "Courier", value: "'Courier New', monospace" },
+];
+
+const SIZES = ["", "12px", "14px", "16px", "18px", "20px", "24px", "30px", "36px", "48px", "60px"];
+
+const SWATCHES = [
+  "#0f1720",
+  "#4b5563",
+  "#9ca3af",
+  "#ffffff",
+  "#2ac4ea",
+  "#d8f2fd",
+  "#afafaf",
+  "#0ea5e9",
+  "#16a34a",
+  "#eab308",
+  "#f97316",
+  "#dc2626",
+];
+
+function Btn({
+  on,
+  active,
+  title,
+  disabled,
+  children,
+}: {
+  on: () => void;
+  active?: boolean;
+  title: string;
+  disabled?: boolean;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      title={title}
+      aria-label={title}
+      aria-pressed={active}
+      disabled={disabled}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={on}
+      className={[
+        "flex size-7 items-center justify-center border text-ink transition-colors disabled:opacity-35",
+        active ? "border-sea bg-sea/15" : "border-transparent hover:border-ink/20",
+      ].join(" ")}
+    >
+      {children}
+    </button>
+  );
+}
+
+function Divider() {
+  return <span className="mx-1 h-5 w-px bg-ink/10" />;
+}
+
+function ColorControl({
+  label,
+  value,
+  onPick,
+  onClear,
+}: {
+  label: string;
+  value: string;
+  onPick: (color: string) => void;
+  onClear: () => void;
+}) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        title={label}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={() => setOpen((o) => !o)}
+        className="flex h-7 items-center gap-1 border border-transparent px-1.5 text-[0.65rem] uppercase tracking-widest text-ink hover:border-ink/20"
+      >
+        {label}
+        <span
+          className="size-3 border border-ink/25"
+          style={{ background: value || "transparent" }}
+        />
+      </button>
+      {open ? (
+        <>
+          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
+          <div className="absolute left-0 top-8 z-50 w-44 border border-ink/15 bg-white p-2 shadow-lg">
+            <div className="grid grid-cols-6 gap-1">
+              {SWATCHES.map((c) => (
+                <button
+                  key={c}
+                  type="button"
+                  onMouseDown={(e) => e.preventDefault()}
+                  onClick={() => {
+                    onPick(c);
+                    setOpen(false);
+                  }}
+                  className="size-5 border border-ink/15"
+                  style={{ background: c }}
+                  title={c}
+                />
+              ))}
+            </div>
+            <div className="mt-2 flex items-center gap-2">
+              <input
+                type="color"
+                value={value || "#000000"}
+                onChange={(e) => onPick(e.target.value)}
+                className="h-6 w-10 border border-ink/15 bg-white"
+              />
+              <button
+                type="button"
+                onMouseDown={(e) => e.preventDefault()}
+                onClick={() => {
+                  onClear();
+                  setOpen(false);
+                }}
+                className="text-[0.65rem] uppercase tracking-widest text-ink/60 hover:text-ink"
+              >
+                Clear
+              </button>
+            </div>
+          </div>
+        </>
+      ) : null}
+    </div>
+  );
+}
+
+function Toolbar({ editor }: { editor: Editor }) {
+  const [pickImage, setPickImage] = useState(false);
+
+  const setLink = () => {
+    const previous = (editor.getAttributes("link").href as string) ?? "";
+    const url = window.prompt("Link URL (https://…, /page, mailto:, tel:)", previous);
+    if (url === null) return;
+    if (!url.trim()) {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url.trim() }).run();
+  };
+
+  const headingValue = (() => {
+    for (const level of [1, 2, 3, 4, 5, 6] as const) {
+      if (editor.isActive("heading", { level })) return `h${level}`;
+    }
+    return editor.isActive("codeBlock") ? "code" : "p";
+  })();
+
+  return (
+    <div className="sticky top-0 z-20 flex flex-wrap items-center gap-0.5 border-b border-ink/10 bg-white/95 p-1.5 backdrop-blur">
+      <Btn
+        on={() => editor.chain().focus().undo().run()}
+        title="Undo"
+        disabled={!editor.can().undo()}
+      >
+        <Undo2 className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().redo().run()}
+        title="Redo"
+        disabled={!editor.can().redo()}
+      >
+        <Redo2 className="size-3.5" />
+      </Btn>
+      <Divider />
+
+      <select
+        value={headingValue}
+        onChange={(e) => {
+          const v = e.target.value;
+          const chain = editor.chain().focus();
+          if (v === "p") chain.setParagraph().run();
+          else if (v === "code") chain.toggleCodeBlock().run();
+          else chain.setHeading({ level: Number(v.slice(1)) as 1 | 2 | 3 | 4 | 5 | 6 }).run();
+        }}
+        className="h-7 border border-ink/15 bg-white px-1 text-xs text-ink focus:border-sea focus:outline-none"
+        title="Text style"
+      >
+        <option value="p">Paragraph</option>
+        <option value="h1">Heading 1</option>
+        <option value="h2">Heading 2</option>
+        <option value="h3">Heading 3</option>
+        <option value="h4">Heading 4</option>
+        <option value="h5">Heading 5</option>
+        <option value="h6">Heading 6</option>
+        <option value="code">Code block</option>
+      </select>
+
+      <select
+        value={(editor.getAttributes("textStyle").fontFamily as string) ?? ""}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (!v) editor.chain().focus().unsetFontFamily().run();
+          else editor.chain().focus().setFontFamily(v).run();
+        }}
+        className="h-7 border border-ink/15 bg-white px-1 text-xs text-ink focus:border-sea focus:outline-none"
+        title="Font"
+      >
+        {FONTS.map((f) => (
+          <option key={f.label} value={f.value}>
+            {f.label}
+          </option>
+        ))}
+      </select>
+
+      <select
+        value={(editor.getAttributes("textStyle").fontSize as string) ?? ""}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (!v) editor.chain().focus().unsetFontSize().run();
+          else editor.chain().focus().setFontSize(v).run();
+        }}
+        className="h-7 border border-ink/15 bg-white px-1 text-xs text-ink focus:border-sea focus:outline-none"
+        title="Font size"
+      >
+        {SIZES.map((s) => (
+          <option key={s || "default"} value={s}>
+            {s || "Size"}
+          </option>
+        ))}
+      </select>
+      <Divider />
+
+      <Btn
+        on={() => editor.chain().focus().toggleBold().run()}
+        active={editor.isActive("bold")}
+        title="Bold"
+      >
+        <Bold className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleItalic().run()}
+        active={editor.isActive("italic")}
+        title="Italic"
+      >
+        <Italic className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleUnderline().run()}
+        active={editor.isActive("underline")}
+        title="Underline"
+      >
+        <UnderlineIcon className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleStrike().run()}
+        active={editor.isActive("strike")}
+        title="Strikethrough"
+      >
+        <Strikethrough className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleCode().run()}
+        active={editor.isActive("code")}
+        title="Inline code"
+      >
+        <Code className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleSubscript().run()}
+        active={editor.isActive("subscript")}
+        title="Subscript"
+      >
+        <SubIcon className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleSuperscript().run()}
+        active={editor.isActive("superscript")}
+        title="Superscript"
+      >
+        <SupIcon className="size-3.5" />
+      </Btn>
+      <Divider />
+
+      <ColorControl
+        label="A"
+        value={(editor.getAttributes("textStyle").color as string) ?? ""}
+        onPick={(c) => editor.chain().focus().setColor(c).run()}
+        onClear={() => editor.chain().focus().unsetColor().run()}
+      />
+      <ColorControl
+        label="BG"
+        value={(editor.getAttributes("highlight").color as string) ?? ""}
+        onPick={(c) => editor.chain().focus().setHighlight({ color: c }).run()}
+        onClear={() => editor.chain().focus().unsetHighlight().run()}
+      />
+      <Divider />
+
+      <Btn
+        on={() => editor.chain().focus().setTextAlign("left").run()}
+        active={editor.isActive({ textAlign: "left" })}
+        title="Align left"
+      >
+        <AlignLeft className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().setTextAlign("center").run()}
+        active={editor.isActive({ textAlign: "center" })}
+        title="Align center"
+      >
+        <AlignCenter className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().setTextAlign("right").run()}
+        active={editor.isActive({ textAlign: "right" })}
+        title="Align right"
+      >
+        <AlignRight className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().setTextAlign("justify").run()}
+        active={editor.isActive({ textAlign: "justify" })}
+        title="Justify"
+      >
+        <AlignJustify className="size-3.5" />
+      </Btn>
+      <select
+        value={(editor.getAttributes("paragraph").lineHeight as string) ?? ""}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (!v) editor.chain().focus().unsetLineHeight().run();
+          else editor.chain().focus().setLineHeight(v).run();
+        }}
+        className="h-7 border border-ink/15 bg-white px-1 text-xs text-ink focus:border-sea focus:outline-none"
+        title="Line height"
+      >
+        <option value="">Line height</option>
+        {["1", "1.25", "1.5", "1.75", "2"].map((v) => (
+          <option key={v} value={v}>
+            {v}
+          </option>
+        ))}
+      </select>
+      <Divider />
+
+      <Btn
+        on={() => editor.chain().focus().toggleBulletList().run()}
+        active={editor.isActive("bulletList")}
+        title="Bullet list"
+      >
+        <List className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleOrderedList().run()}
+        active={editor.isActive("orderedList")}
+        title="Numbered list"
+      >
+        <ListOrdered className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().toggleBlockquote().run()}
+        active={editor.isActive("blockquote")}
+        title="Quote"
+      >
+        <Quote className="size-3.5" />
+      </Btn>
+      <Btn on={() => editor.chain().focus().setHorizontalRule().run()} title="Divider">
+        <Minus className="size-3.5" />
+      </Btn>
+      <Divider />
+
+      <Btn on={setLink} active={editor.isActive("link")} title="Add or edit link">
+        <LinkIcon className="size-3.5" />
+      </Btn>
+      <Btn
+        on={() => editor.chain().focus().extendMarkRange("link").unsetLink().run()}
+        title="Remove link"
+        disabled={!editor.isActive("link")}
+      >
+        <Unlink className="size-3.5" />
+      </Btn>
+      <Btn on={() => setPickImage(true)} title="Insert image from the media library">
+        <ImageIcon className="size-3.5" />
+      </Btn>
+      <Divider />
+
+      <Btn
+        on={() =>
+          editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
+        }
+        title="Insert table"
+      >
+        <TableIcon className="size-3.5" />
+      </Btn>
+      {editor.isActive("table") ? (
+        <div className="flex items-center gap-1 text-[0.65rem] uppercase tracking-widest text-ink/60">
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().addRowAfter().run()}
+            className="hover:text-ink"
+          >
+            +Row
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().addColumnAfter().run()}
+            className="hover:text-ink"
+          >
+            +Col
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().deleteRow().run()}
+            className="hover:text-ink"
+          >
+            -Row
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().deleteColumn().run()}
+            className="hover:text-ink"
+          >
+            -Col
+          </button>
+          <button
+            type="button"
+            onMouseDown={(e) => e.preventDefault()}
+            onClick={() => editor.chain().focus().deleteTable().run()}
+            className="text-red-500 hover:text-red-700"
+          >
+            Del table
+          </button>
+        </div>
+      ) : null}
+      <Divider />
+
+      <Btn
+        on={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}
+        title="Clear formatting"
+      >
+        <Eraser className="size-3.5" />
+      </Btn>
+
+      {pickImage ? (
+        <MediaPickerDialog
+          accept="image"
+          onClose={() => setPickImage(false)}
+          onPick={(m) => {
+            editor.chain().focus().setImage({ src: m.url, alt: m.name }).run();
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/**
+ * Advanced WYSIWYG editor (TipTap) used by the rich-text block.
+ * Emits sanitized HTML; also offers a raw HTML source view for pasting
+ * markup from elsewhere.
+ */
+export function RichTextEditor({
+  value,
+  onChange,
+  placeholder = "Write or paste your text…",
+}: {
+  value: string;
+  onChange: (html: string) => void;
+  placeholder?: string;
+}) {
+  const [source, setSource] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const last = useRef(value);
+
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [
+      StarterKit.configure({
+        link: {
+          openOnClick: false,
+          autolink: true,
+          HTMLAttributes: { rel: "noopener noreferrer" },
+        },
+        heading: { levels: [1, 2, 3, 4, 5, 6] },
+      }),
+      TextStyle,
+      Color,
+      FontFamily,
+      FontSize,
+      LineHeight,
+      Highlight.configure({ multicolor: true }),
+      TextAlign.configure({ types: ["heading", "paragraph"] }),
+      Subscript,
+      Superscript,
+      Image.configure({ inline: false, allowBase64: false }),
+      Table.configure({ resizable: true }),
+      TableRow,
+      TableHeader,
+      TableCell,
+      Placeholder.configure({ placeholder }),
+    ],
+    content: value || "",
+    editorProps: {
+      attributes: {
+        class: "rte-content focus:outline-none",
+      },
+    },
+    onUpdate: ({ editor: e }) => {
+      const html = sanitizeHtml(e.getHTML());
+      last.current = html;
+      onChange(html);
+    },
+  });
+
+  // Adopt external changes (locale switch, version rollback) without
+  // clobbering what the user is typing.
+  useEffect(() => {
+    if (!editor) return;
+    if (value === last.current) return;
+    last.current = value;
+    editor.commands.setContent(value || "", { emitUpdate: false });
+    setDraft(value);
+  }, [value, editor]);
+
+  const applySource = useCallback(() => {
+    const html = sanitizeHtml(draft);
+    last.current = html;
+    onChange(html);
+    editor?.commands.setContent(html || "", { emitUpdate: false });
+    setSource(false);
+  }, [draft, editor, onChange]);
+
+  return (
+    <div className="rte-editor border border-ink/15 bg-white">
+      {editor ? <Toolbar editor={editor} /> : null}
+      {source ? (
+        <div className="p-2">
+          <textarea
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            spellCheck={false}
+            rows={16}
+            className="w-full border border-ink/15 p-2 font-mono text-xs text-ink focus:border-sea focus:outline-none"
+          />
+          <div className="mt-2 flex gap-2">
+            <button
+              type="button"
+              onClick={applySource}
+              className="border border-ink/20 px-3 py-1.5 text-xs uppercase tracking-widest hover:border-sea"
+            >
+              Apply HTML
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                setDraft(value);
+                setSource(false);
+              }}
+              className="px-3 py-1.5 text-xs uppercase tracking-widest text-ink/60 hover:text-ink"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="max-h-[32rem] overflow-auto p-4">
+          <EditorContent editor={editor} />
+        </div>
+      )}
+      <div className="flex items-center justify-between border-t border-ink/10 px-2 py-1">
+        <span className="text-[0.65rem] uppercase tracking-widest text-ink/40">
+          {editor
+            ? `${editor.storage.characterCount?.characters?.() ?? editor.getText().length} chars`
+            : ""}
+        </span>
+        <button
+          type="button"
+          onClick={() => {
+            setDraft(value);
+            setSource((s) => !s);
+          }}
+          className="flex items-center gap-1 text-[0.65rem] uppercase tracking-widest text-ink/60 hover:text-ink"
+        >
+          <Code2 className="size-3" />
+          {source ? "Visual editor" : "HTML source"}
+        </button>
+      </div>
+    </div>
+  );
+}