@june-ai/june-ui 0.2.4 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## [Unreleased] — DocumentEditor premium UI
+
+### Added
+- Document app bar: editable title, AI-draft badge, Save, **Download** menu (Word, PDF, HTML,
+  Markdown, plain text, copy to clipboard) and full-screen mode (Esc / ✕ to close).
+- Grouped ribbon with labels and More/Less: History · Format (bold, italic, underline, strike,
+  inline code, superscript, subscript) · Align · Lists (with indent/outdent) / Style (paragraph,
+  headings, quote, code block) · Font family · Font size · formatting marks (¶) · Document (page
+  break, divider, page/full-width layout, find & replace) · Color (text color, highlight) ·
+  Insert (link, image upload/URL, table grid picker) · Actions (clear formatting).
+- Contextual table tools (rows, columns, merge/split, header row, delete table).
+- Selection bubble menu, A4 page canvas with page boundaries, "Page X of Y", word count, zoom.
+- Find & replace (`Ctrl/Cmd+F`) with match highlighting, match case, replace and replace all.
+- Page break node (`Ctrl/Cmd+Enter`); DOCX/PDF/HTML exports start a new page there.
+- DOCX export now keeps text color, highlight, font family, font size, super/subscript and images.
+- New dependencies: `@tiptap/extension-text-style`, `-highlight`, `-image`, `-subscript`, `-superscript`.
+
+### Compatibility
+- Props, callbacks (`onSave`, `onExport`, `onDocumentChange`, `onConflict`, …), the store, AI merge,
+  autosave, `Ctrl/Cmd+S` and the OpenUI `DocumentEditor(...)` signature are unchanged.
+
 ## [Unreleased] (planned 0.2.0)
 
 ### Added

package/dist/chunk-CZE533PM.js

@@ -0,0 +1,343 @@
+// src/components/document-editor/document-engine.ts
+import { Editor } from "@tiptap/core";
+
+// src/errors/errors.ts
+var JuneError = class _JuneError extends Error {
+  constructor(code, message, options = {}) {
+    super(message);
+    Object.setPrototypeOf(this, _JuneError.prototype);
+    this.name = "JuneError";
+    this.code = code;
+    this.details = options.details;
+    if (options.cause !== void 0) {
+      this.cause = options.cause;
+    }
+  }
+};
+function isJuneError(value) {
+  return value instanceof JuneError;
+}
+function toJuneError(error, fallbackCode, message) {
+  if (error instanceof JuneError) return error;
+  const text = message ?? (error instanceof Error ? error.message : String(error));
+  return new JuneError(fallbackCode, text, { cause: error });
+}
+
+// src/components/document-editor/document-extensions.ts
+import { Node, mergeAttributes } from "@tiptap/core";
+import Highlight from "@tiptap/extension-highlight";
+import Image from "@tiptap/extension-image";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
+import { TableKit } from "@tiptap/extension-table";
+import TextAlign from "@tiptap/extension-text-align";
+import { Color, FontFamily, FontSize, TextStyle } from "@tiptap/extension-text-style";
+import { Markdown } from "@tiptap/markdown";
+import StarterKit from "@tiptap/starter-kit";
+
+// src/components/document-editor/document-search.ts
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+import { Decoration, DecorationSet } from "@tiptap/pm/view";
+var searchKey = new PluginKey("juneDocSearch");
+function findMatches(doc, term, caseSensitive) {
+  if (!term) return [];
+  const needle = caseSensitive ? term : term.toLowerCase();
+  const out = [];
+  doc.descendants((node, pos) => {
+    if (!node.isTextblock) return true;
+    let text = "";
+    const map = [];
+    node.forEach((child, offset) => {
+      const start = pos + 1 + offset;
+      if (child.isText && child.text) {
+        for (let i = 0; i < child.text.length; i++) map.push(start + i);
+        text += child.text;
+      } else {
+        map.push(start);
+        text += "\uFFFC";
+      }
+    });
+    const hay = caseSensitive ? text : text.toLowerCase();
+    let idx = hay.indexOf(needle);
+    while (idx !== -1) {
+      out.push({ from: map[idx], to: map[idx + needle.length - 1] + 1 });
+      idx = hay.indexOf(needle, idx + needle.length);
+    }
+    return false;
+  });
+  return out;
+}
+function build(doc, term, caseSensitive, current) {
+  const matches = findMatches(doc, term, caseSensitive);
+  const active = matches.length ? Math.min(Math.max(current, 0), matches.length - 1) : -1;
+  const decorations = DecorationSet.create(
+    doc,
+    matches.map(
+      (m, i) => Decoration.inline(m.from, m.to, {
+        class: i === active ? "june-doc__match june-doc__match--active" : "june-doc__match"
+      })
+    )
+  );
+  return { term, caseSensitive, current: active, matches, decorations };
+}
+var DocumentSearch = Extension.create({
+  name: "juneDocSearch",
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: searchKey,
+        state: {
+          init: () => ({ term: "", caseSensitive: false, current: -1, matches: [], decorations: DecorationSet.empty }),
+          apply(tr, prev, _old, state) {
+            const meta = tr.getMeta(searchKey);
+            if (!meta && !tr.docChanged) return prev;
+            if (!meta && !prev.term) return prev;
+            return build(
+              state.doc,
+              meta?.term ?? prev.term,
+              meta?.caseSensitive ?? prev.caseSensitive,
+              meta?.current ?? prev.current
+            );
+          }
+        },
+        props: {
+          decorations: (state) => searchKey.getState(state)?.decorations
+        }
+      })
+    ];
+  }
+});
+function getSearchState(editor) {
+  return editor ? searchKey.getState(editor.state) : void 0;
+}
+function setSearch(editor, meta) {
+  editor.view.dispatch(editor.state.tr.setMeta(searchKey, meta));
+}
+function gotoMatch(editor, step) {
+  const s = getSearchState(editor);
+  if (!s || !s.matches.length) return;
+  const n = s.matches.length;
+  const current = s.current < 0 ? 0 : (s.current + step + n) % n;
+  setSearch(editor, { current });
+  const m = s.matches[current];
+  editor.chain().setTextSelection(m).scrollIntoView().run();
+}
+function replaceCurrent(editor, replacement) {
+  const s = getSearchState(editor);
+  if (!s || s.current < 0) return;
+  const m = s.matches[s.current];
+  editor.chain().command(({ tr }) => {
+    if (replacement) tr.insertText(replacement, m.from, m.to);
+    else tr.delete(m.from, m.to);
+    return true;
+  }).run();
+  gotoMatch(editor, 0);
+}
+function replaceAll(editor, replacement) {
+  const s = getSearchState(editor);
+  if (!s || !s.matches.length) return 0;
+  const matches = [...s.matches].reverse();
+  editor.chain().command(({ tr }) => {
+    for (const m of matches) {
+      if (replacement) tr.insertText(replacement, m.from, m.to);
+      else tr.delete(m.from, m.to);
+    }
+    return true;
+  }).run();
+  return matches.length;
+}
+
+// src/components/document-editor/document-extensions.ts
+var PageBreak = Node.create({
+  name: "pageBreak",
+  group: "block",
+  atom: true,
+  selectable: true,
+  parseHTML() {
+    return [{ tag: "div[data-page-break]" }];
+  },
+  renderHTML({ HTMLAttributes }) {
+    return [
+      "div",
+      mergeAttributes(HTMLAttributes, {
+        "data-page-break": "true",
+        class: "june-doc__page-break",
+        style: "break-after: page; page-break-after: always;"
+      })
+    ];
+  },
+  // Markdown has no page break; a thematic break is the closest stable equivalent.
+  renderMarkdown: () => "---",
+  addCommands() {
+    return {
+      setPageBreak: () => ({ chain }) => chain().insertContent([{ type: this.name }, { type: "paragraph" }]).run()
+    };
+  },
+  addKeyboardShortcuts() {
+    return { "Mod-Enter": () => this.editor.commands.setPageBreak() };
+  }
+});
+function createDocumentExtensions() {
+  return [
+    StarterKit.configure({
+      heading: { levels: [1, 2, 3] },
+      // Tiptap v3 StarterKit already includes Link and Underline
+      link: { openOnClick: false, autolink: true, defaultProtocol: "https" }
+    }),
+    TextAlign.configure({ types: ["heading", "paragraph"] }),
+    TableKit,
+    TextStyle,
+    Color,
+    FontFamily,
+    FontSize,
+    Highlight.configure({ multicolor: true }),
+    Subscript,
+    Superscript,
+    Image.configure({
+      inline: false,
+      allowBase64: true,
+      resize: { enabled: true, minWidth: 48, minHeight: 32, alwaysPreserveAspectRatio: true }
+    }),
+    PageBreak,
+    DocumentSearch,
+    Markdown
+  ];
+}
+
+// src/components/document-editor/document-utils.ts
+var emptyDoc = () => ({ type: "doc", content: [{ type: "paragraph" }] });
+function isDocJSON(value) {
+  if (!value || typeof value !== "object") return false;
+  const v = value;
+  return v.type === "doc" && (v.content === void 0 || Array.isArray(v.content));
+}
+function looksLikeDocJSON(text) {
+  return /^\s*\{\s*"type"\s*:\s*"doc"/.test(text);
+}
+function tryParseDocJSON(text) {
+  try {
+    const value = JSON.parse(text);
+    return isDocJSON(value) ? value : null;
+  } catch {
+    return null;
+  }
+}
+var keyCache = /* @__PURE__ */ new WeakMap();
+function docKey(doc) {
+  let key = keyCache.get(doc);
+  if (key === void 0) {
+    key = JSON.stringify(doc);
+    keyCache.set(doc, key);
+  }
+  return key;
+}
+function plainText(node) {
+  const n = node;
+  if (typeof n.text === "string") return n.text;
+  return (n.content ?? []).map(plainText).join(" ");
+}
+function countWords(text) {
+  const trimmed = text.trim();
+  return trimmed ? trimmed.split(/\s+/).length : 0;
+}
+var wordCache = /* @__PURE__ */ new WeakMap();
+function wordCountOf(doc) {
+  let count = wordCache.get(doc);
+  if (count === void 0) {
+    count = countWords(plainText(doc));
+    wordCache.set(doc, count);
+  }
+  return count;
+}
+function slugify(value) {
+  return value.toLowerCase().normalize("NFKD").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
+}
+function debounce(fn, wait) {
+  let timer = null;
+  const run = () => {
+    timer = null;
+    fn();
+  };
+  const debounced = (() => {
+    if (timer !== null) clearTimeout(timer);
+    timer = setTimeout(run, wait);
+  });
+  debounced.cancel = () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  debounced.flush = () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+      run();
+    }
+  };
+  return debounced;
+}
+function sanitizeHref(input) {
+  const value = input.trim();
+  if (!value) return null;
+  if (/^(https?:|mailto:|tel:)/i.test(value)) return value;
+  if (/^[a-z][a-z0-9+.-]*:/i.test(value)) return null;
+  if (value.startsWith("/") || value.startsWith("#")) return value;
+  return `https://${value}`;
+}
+
+// src/components/document-editor/document-engine.ts
+var scratch = null;
+function scratchEditor() {
+  if (!scratch || scratch.isDestroyed) {
+    scratch = new Editor({ extensions: createDocumentExtensions(), content: "" });
+  }
+  return scratch;
+}
+function parseDocumentContent(text) {
+  const editor = scratchEditor();
+  const trimmed = text.trim();
+  try {
+    if (looksLikeDocJSON(trimmed)) {
+      const json = tryParseDocJSON(trimmed);
+      if (!json) throw new Error("The document JSON could not be parsed");
+      editor.schema.nodeFromJSON(json).check();
+      editor.commands.setContent(json, { emitUpdate: false });
+    } else {
+      editor.commands.setContent(trimmed, { contentType: "markdown", emitUpdate: false });
+    }
+    return editor.getJSON();
+  } catch (error) {
+    throw toJuneError(error, "DOCUMENT_ERROR", "The document content is invalid");
+  }
+}
+function load(doc) {
+  const editor = scratchEditor();
+  editor.commands.setContent(doc, { emitUpdate: false });
+  return editor;
+}
+var docToHtml = (doc) => load(doc).getHTML();
+var docToMarkdown = (doc) => load(doc).getMarkdown();
+var docToText = (doc) => load(doc).getText({ blockSeparator: "\n\n" });
+
+export {
+  JuneError,
+  isJuneError,
+  toJuneError,
+  emptyDoc,
+  docKey,
+  wordCountOf,
+  slugify,
+  debounce,
+  sanitizeHref,
+  getSearchState,
+  setSearch,
+  gotoMatch,
+  replaceCurrent,
+  replaceAll,
+  createDocumentExtensions,
+  parseDocumentContent,
+  docToHtml,
+  docToMarkdown,
+  docToText
+};

package/dist/{document-engine-C6ILFMRP.js → document-engine-IAY2T6B3.js}

@@ -3,7 +3,7 @@ import {
   docToMarkdown,
   docToText,
   parseDocumentContent
-} from "./chunk-HFHRSNIL.js";
+} from "./chunk-CZE533PM.js";
 export {
   docToHtml,
   docToMarkdown,