react-word-editor 0.0.0-stage → 0.1.0

package/MIGRATION.md

@@ -0,0 +1,106 @@
+# Migrating flabs-frontend from TinyMCE
+
+All ~20 TinyMCE screens go through one wrapper,
+`src/components/TextEditor/textEditor.js`. Replace that file with the version
+below and every screen moves over with no call-site changes.
+
+## 1. Install
+
+```bash
+npm i react-word-editor
+npm uninstall tinymce @tinymce/tinymce-react   # once nothing imports them
+```
+
+## 2. Replace `src/components/TextEditor/textEditor.js`
+
+```jsx
+import React from 'react';
+import axios from 'axios';
+import RichTextEditor from 'react-word-editor';
+import 'react-word-editor/style.css';
+
+const MAX_IMAGE_SIZE = 1024 * 1024;
+const S3_BASE = 'https://radiology-flabs.s3.ap-south-1.amazonaws.com/';
+
+const uploadToS3 = async (file) => {
+  const fileType = file.name?.split('.')?.pop() || file.type?.split('/')?.pop();
+  const { data } = await axios.get(`/s3UrlRadiology?fileType=${fileType}`);
+  await fetch(data?.url, { method: 'PUT', headers: { 'Content-Type': file.type }, body: file });
+  return `${S3_BASE}${data?.name}.${fileType}`;
+};
+
+const TextEditor = ({
+  height,
+  value,
+  setValue,
+  fnProps = [],
+  disabled,
+  dynamicData = {},
+  handleFocusRestore = () => {},
+  nodeIds = false,
+  onInit,
+}) => (
+  <RichTextEditor
+    height={height || 500}
+    value={value}
+    setValue={setValue}
+    fnProps={fnProps}
+    disabled={disabled}
+    dynamicData={dynamicData}
+    handleFocusRestore={handleFocusRestore}
+    nodeIds={nodeIds}
+    onInit={onInit}
+    onImageUpload={uploadToS3}
+    maxImageSize={MAX_IMAGE_SIZE}
+  />
+);
+
+export default TextEditor;
+```
+
+Then delete `BundledEditor.js`. `utils/constants.js` (`NODE_ID_*`) can go too
+unless something else imports it.
+
+### Prop-by-prop compatibility
+
+| Old TinyMCE wrapper prop | react-word-editor behaviour |
+| --- | --- |
+| `value` (HTML string) | Same. Legacy TinyMCE HTML loads as-is. |
+| `setValue(html, ...fnProps)` | Same signature, same HTML output. |
+| `fnProps` | Passed through as extra args. |
+| `height` | Same (default 500 in the wrapper). |
+| `disabled` | Read-only, toolbar greyed out. |
+| `dynamicData` | `{{key}}` replaced on blur, formatting kept. |
+| `handleFocusRestore` | Called on focus. |
+| `nodeIds` | Same `data-node-id` attribute on the same block types. IDs are unique and are not copied when a paragraph is split. |
+| `onInit(evt, editor)` | Called once. `editor.getContent()`, `setContent()`, `getBody()`, `focus()` work. The TipTap instance is `editor.tiptap`. |
+| Image upload via `/s3UrlRadiology` | `onImageUpload(file) => url`. Unlike the old handler, the PUT is awaited and nothing falls back to a fake image. |
+
+Only `SupportAgent`'s `EditableValues.jsx` uses `onInit`, and it only calls
+`editor.getContent()`, so it works unchanged.
+
+## 3. Reports: drop `react-pdf-html-flabs-2` (optional, file by file)
+
+`RichTextPdf` takes the same children / `style` shape as the `Html` component:
+
+```diff
+- import Html from 'react-pdf-html-flabs-2';
++ import Html from 'react-word-editor/pdf';
+```
+
+```jsx
+<Html>{value}</Html>
+<Html style={{ fontSize: 9 }} options={{ ignoreFontSizes: true }}>{interpretation}</Html>
+```
+
+- `options.ignoreFontSizes` replaces the `removeFontSize(...)` helper.
+- Pass registered fonts so content fonts are kept, e.g.
+  `options={{ fonts: ['Roboto'], fontMap: { Calibri: 'Roboto', Arial: 'Roboto' } }}`.
+  Any other family falls back to the surrounding font, because react-pdf throws
+  on unregistered fonts.
+- Bold and italic text needs the matching weights registered for the font,
+  just as with the old renderer.
+
+To skip HTML parsing at print time, save the editor's react-pdf tree next to
+the HTML (`outputFormat="all"` gives `{ html, text, json, pdf }`). Then render
+`<RichTextPdf value={savedTree} />`.

package/README.md

@@ -1,3 +1,122 @@
-# Temporary Holding Version
+# react-word-editor
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Word-like rich text editor for React, built on [TipTap](https://tiptap.dev) / ProseMirror.
+
+- **Word and Excel paste that keeps formatting:** tables (borders, shading,
+  column widths, merged cells), indentation and hanging indents, nested
+  bullet and numbered lists, alignment, line spacing, paragraph spacing,
+  fonts, sizes, colours, highlight, sub/superscript.
+- **Reads HTML** (including legacy TinyMCE content), editor JSON or plain text.
+- **Writes** HTML, plain text, JSON, or a **react-pdf tree** that renders
+  directly with `@react-pdf/renderer`, with no HTML-to-PDF step.
+
+```bash
+npm i react-word-editor
+# for PDF output
+npm i @react-pdf/renderer
+```
+
+## Editor
+
+```jsx
+import RichTextEditor from 'react-word-editor';
+import 'react-word-editor/style.css';
+
+<RichTextEditor value={html} onChange={setHtml} height={500} />;
+```
+
+| Prop | Default | |
+| --- | --- | --- |
+| `value` | | HTML string, plain text, or editor JSON (`{ type: 'doc' }`). Controlled. |
+| `onChange(value, ...fnProps)` | | Called on every change with the output in `outputFormat`. `setValue` is an alias. |
+| `outputFormat` | `'html'` | `'html'` \| `'text'` \| `'json'` \| `'pdf'` \| `'all'` (`{ html, text, json, pdf }`). |
+| `pdfOptions` | | Options for the `pdf` output (see below). |
+| `fnProps` | `[]` | Extra arguments appended to `onChange`. |
+| `height` | auto | Fixed height (number or CSS). Content scrolls inside. Otherwise it grows from `minHeight`. |
+| `minHeight` | `200` | |
+| `disabled` / `readOnly` | `false` | `readOnly` also hides the toolbar. |
+| `placeholder` | | |
+| `toolbar` | `true` | `false` to hide, or an array of item keys (see `DEFAULT_TOOLBAR`). `'|'` is a divider. |
+| `fontFamilies` / `fontSizes` | | Toolbar choices. |
+| `dynamicData` | | `{ key: value }`. `{{key}}` in the text is replaced on blur. |
+| `nodeIds` | `false` | Stamp a unique `data-node-id` on every block. |
+| `onImageUpload(file)` | base64 | Return a Promise of the image URL. Used for toolbar, paste and drop. |
+| `maxImageSize` | | Bytes. |
+| `onInit(evt, handle)` / `onReady(handle)` | | `handle.getContent({ format })`, `setContent`, `getText`, `getJSON`, `getPdfTree`, `getBody`, `focus`, `tiptap`. |
+| `onFocus` / `onBlur` / `onError` | | |
+| `pageView` | `false` | Shows the document as a white A4 page on a grey canvas, like Word. |
+| `showWordCount` | `true` | |
+
+Keyboard: the usual Ctrl/Cmd shortcuts, plus Tab / Shift+Tab to indent and
+outdent. In a list they nest the item, and in a table they move between cells.
+
+Word-style menus, also usable as commands on `handle.tiptap`:
+
+| Toolbar key | Command | Values |
+| --- | --- | --- |
+| `textCase` | `setTextCase(mode)` | `sentence`, `lower`, `upper`, `capitalize`, `toggle`. Uses the selection, or the word under the cursor. |
+| `paragraphSpacing` | `setParagraphSpacing(preset)` | `default`, `none`, `compact`, `tight`, `open`, `relaxed`, `double` (see `PARAGRAPH_SPACING`). |
+| Table bar: Borders | `setTableBorders(mode)` | `top`, `bottom`, `left`, `right`, `insideH`, `insideV`, `outside`, `inside`, `all`, `none`. Uses the selected cells, or the current cell. |
+
+Theme with CSS variables on `.fe-editor`: `--fe-primary`, `--fe-border`,
+`--fe-content-font`, `--fe-content-size`, …
+
+## PDF (react-pdf)
+
+```jsx
+import { Document, Page } from '@react-pdf/renderer';
+import RichTextPdf from 'react-word-editor/pdf';
+
+<Document>
+  <Page>
+    <RichTextPdf value={htmlOrJsonOrTree} options={{ fonts: ['Roboto'] }} />
+  </Page>
+</Document>;
+```
+
+`value` (or children) may be HTML, editor JSON or a stored pdf tree. Options:
+
+| Option | Default | |
+| --- | --- | --- |
+| `fontSize` | inherited | Base size in pt. Headings scale from it. |
+| `fonts` | `[]` | Registered font families that content may use. |
+| `fontMap` | `{}` | Map CSS families to registered ones, e.g. `{ Calibri: 'Roboto' }`. |
+| `ignoreFontSizes` | `false` | Ignore font sizes stored in the content. |
+| `paragraphSpacing` | `4` | pt below paragraphs without explicit spacing. |
+| `tableBorder` | `0.75pt solid #000000` | For cells without explicit borders. |
+| `cellPadding` | `{ vertical: 2, horizontal: 4 }` | |
+| `keepRowsTogether` | `true` | Stop table rows splitting across pages. |
+| `styles` | `{}` | Per-node overrides: `root`, `paragraph`, `heading`, `heading1`…, `list`, `listItem`, `listMarker`, `table`, `tableRow`, `tableCell`, `tableHeader`, `image`, `link`, `text`, `blockquote`, `horizontalRule`. |
+
+Lower level: `jsonToPdfTree(json, options)` returns plain serialisable data
+(`{ type: 'view' | 'text' | 'link' | 'image', style, children }`), and
+`renderPdfTree(tree)` turns it into react-pdf elements.
+
+## Converters (no React)
+
+```js
+import { htmlToJSON, jsonToHTML, jsonToText, htmlToText, jsonToPdfTree, cleanPastedHtml } from 'react-word-editor/convert';
+```
+
+`htmlToJSON` and `jsonToHTML` need a DOM (a browser, or jsdom / happy-dom on
+the server).
+
+## Development
+
+```bash
+npm install
+npm run dev     # playground at http://localhost:5199
+npm test
+npm run build
+npm publish     # runs tests + build first
+```
+
+## Known limits
+
+- Images pasted straight out of Word arrive as local `file://` links that a
+  browser can't read, so they are dropped. Insert or drag the picture file in
+  instead.
+- In PDFs, `rowspan` cells are drawn as a run of joined cells, and react-pdf
+  ignores negative (hanging) text indents.
+- In PDFs, a highlighted word inside a paragraph with line spacing above 1.0
+  is shaded for the full line height (a react-pdf behaviour).

package/dist/chunk-CTVYA4A3.cjs

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/editor/variables.js
+var VARIABLE_RE = /\{\{\s*([^{}]+?)\s*\}\}/g;
+var lookup = (data, key) => {
+  const value = data == null ? void 0 : data[key];
+  if (value === null || value === void 0 || value === "") return null;
+  return String(value);
+};
+var replaceVariables = (editor, data) => {
+  if (!editor || editor.isDestroyed || !data || !Object.keys(data).length) return false;
+  const { state } = editor;
+  const edits = [];
+  state.doc.descendants((node, pos) => {
+    if (!node.isText || !node.text.includes("{{")) return;
+    VARIABLE_RE.lastIndex = 0;
+    let match;
+    while (match = VARIABLE_RE.exec(node.text)) {
+      const value = lookup(data, match[1]);
+      if (value !== null) {
+        edits.push({ from: pos + match.index, to: pos + match.index + match[0].length, value });
+      }
+    }
+  });
+  if (!edits.length) return false;
+  const tr = state.tr;
+  edits.reverse().forEach(({ from, to, value }) => tr.insertText(value, from, to));
+  editor.view.dispatch(tr);
+  return true;
+};
+var replaceVariablesInString = (content, data) => String(content != null ? content : "").replace(VARIABLE_RE, (whole, key) => {
+  var _a;
+  return (_a = lookup(data, key)) != null ? _a : whole;
+});
+
+
+
+
+exports.replaceVariables = replaceVariables; exports.replaceVariablesInString = replaceVariablesInString;
+//# sourceMappingURL=chunk-CTVYA4A3.cjs.map

package/dist/chunk-CTVYA4A3.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/harsh/Documents/Flabs/flabs-editor/dist/chunk-CTVYA4A3.cjs","../src/editor/variables.js"],"names":[],"mappings":"AAAA;ACAA,IAAM,YAAA,EAAc,0BAAA;AAEpB,IAAM,OAAA,EAAS,CAAC,IAAA,EAAM,GAAA,EAAA,GAAQ;AAC5B,EAAA,MAAM,MAAA,EAAQ,KAAA,GAAA,KAAA,EAAA,KAAA,EAAA,EAAA,IAAA,CAAO,GAAA,CAAA;AACrB,EAAA,GAAA,CAAI,MAAA,IAAU,KAAA,GAAQ,MAAA,IAAU,KAAA,EAAA,GAAa,MAAA,IAAU,EAAA,EAAI,OAAO,IAAA;AAClE,EAAA,OAAO,MAAA,CAAO,KAAK,CAAA;AACrB,CAAA;AAIO,IAAM,iBAAA,EAAmB,CAAC,MAAA,EAAQ,IAAA,EAAA,GAAS;AAChD,EAAA,GAAA,CAAI,CAAC,OAAA,GAAU,MAAA,CAAO,YAAA,GAAe,CAAC,KAAA,GAAQ,CAAC,MAAA,CAAO,IAAA,CAAK,IAAI,CAAA,CAAE,MAAA,EAAQ,OAAO,KAAA;AAChF,EAAA,MAAM,EAAE,MAAM,EAAA,EAAI,MAAA;AAClB,EAAA,MAAM,MAAA,EAAQ,CAAC,CAAA;AACf,EAAA,KAAA,CAAM,GAAA,CAAI,WAAA,CAAY,CAAC,IAAA,EAAM,GAAA,EAAA,GAAQ;AACnC,IAAA,GAAA,CAAI,CAAC,IAAA,CAAK,OAAA,GAAU,CAAC,IAAA,CAAK,IAAA,CAAK,QAAA,CAAS,IAAI,CAAA,EAAG,MAAA;AAC/C,IAAA,WAAA,CAAY,UAAA,EAAY,CAAA;AACxB,IAAA,IAAI,KAAA;AACJ,IAAA,MAAA,CAAQ,MAAA,EAAQ,WAAA,CAAY,IAAA,CAAK,IAAA,CAAK,IAAI,CAAA,EAAI;AAC5C,MAAA,MAAM,MAAA,EAAQ,MAAA,CAAO,IAAA,EAAM,KAAA,CAAM,CAAC,CAAC,CAAA;AACnC,MAAA,GAAA,CAAI,MAAA,IAAU,IAAA,EAAM;AAClB,QAAA,KAAA,CAAM,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,KAAA,CAAM,KAAA,EAAO,EAAA,EAAI,IAAA,EAAM,KAAA,CAAM,MAAA,EAAQ,KAAA,CAAM,CAAC,CAAA,CAAE,MAAA,EAAQ,MAAM,CAAC,CAAA;AAAA,MACxF;AAAA,IACF;AAAA,EACF,CAAC,CAAA;AACD,EAAA,GAAA,CAAI,CAAC,KAAA,CAAM,MAAA,EAAQ,OAAO,KAAA;AAC1B,EAAA,MAAM,GAAA,EAAK,KAAA,CAAM,EAAA;AACjB,EAAA,KAAA,CAAM,OAAA,CAAQ,CAAA,CAAE,OAAA,CAAQ,CAAC,EAAE,IAAA,EAAM,EAAA,EAAI,MAAM,CAAA,EAAA,GAAM,EAAA,CAAG,UAAA,CAAW,KAAA,EAAO,IAAA,EAAM,EAAE,CAAC,CAAA;AAC/E,EAAA,MAAA,CAAO,IAAA,CAAK,QAAA,CAAS,EAAE,CAAA;AACvB,EAAA,OAAO,IAAA;AACT,CAAA;AAEO,IAAM,yBAAA,EAA2B,CAAC,OAAA,EAAS,IAAA,EAAA,GAChD,MAAA,CAAO,QAAA,GAAA,KAAA,EAAA,QAAA,EAAW,EAAE,CAAA,CAAE,OAAA,CAAQ,WAAA,EAAa,CAAC,KAAA,EAAO,GAAA,EAAA,GAAK;AAjC1D,EAAA,IAAA,EAAA;AAiC6D,EAAA,OAAA,CAAA,GAAA,EAAA,MAAA,CAAO,IAAA,EAAM,GAAG,CAAA,EAAA,GAAhB,KAAA,EAAA,GAAA,EAAqB,KAAA;AAAA,CAAK,CAAA;ADDvF;AACA;AACE;AACA;AACF,yGAAC","file":"/Users/harsh/Documents/Flabs/flabs-editor/dist/chunk-CTVYA4A3.cjs","sourcesContent":[null,"const VARIABLE_RE = /\\{\\{\\s*([^{}]+?)\\s*\\}\\}/g;\n\nconst lookup = (data, key) => {\n  const value = data?.[key];\n  if (value === null || value === undefined || value === '') return null;\n  return String(value);\n};\n\n// Replaces {{key}} placeholders in text with values from `data`, keeping the\n// text's formatting. Unknown keys are left untouched.\nexport const replaceVariables = (editor, data) => {\n  if (!editor || editor.isDestroyed || !data || !Object.keys(data).length) return false;\n  const { state } = editor;\n  const edits = [];\n  state.doc.descendants((node, pos) => {\n    if (!node.isText || !node.text.includes('{{')) return;\n    VARIABLE_RE.lastIndex = 0;\n    let match;\n    while ((match = VARIABLE_RE.exec(node.text))) {\n      const value = lookup(data, match[1]);\n      if (value !== null) {\n        edits.push({ from: pos + match.index, to: pos + match.index + match[0].length, value });\n      }\n    }\n  });\n  if (!edits.length) return false;\n  const tr = state.tr;\n  edits.reverse().forEach(({ from, to, value }) => tr.insertText(value, from, to));\n  editor.view.dispatch(tr);\n  return true;\n};\n\nexport const replaceVariablesInString = (content, data) =>\n  String(content ?? '').replace(VARIABLE_RE, (whole, key) => lookup(data, key) ?? whole);\n"]}

package/dist/chunk-DCMBE2J7.js

@@ -0,0 +1,38 @@
+// src/editor/variables.js
+var VARIABLE_RE = /\{\{\s*([^{}]+?)\s*\}\}/g;
+var lookup = (data, key) => {
+  const value = data == null ? void 0 : data[key];
+  if (value === null || value === void 0 || value === "") return null;
+  return String(value);
+};
+var replaceVariables = (editor, data) => {
+  if (!editor || editor.isDestroyed || !data || !Object.keys(data).length) return false;
+  const { state } = editor;
+  const edits = [];
+  state.doc.descendants((node, pos) => {
+    if (!node.isText || !node.text.includes("{{")) return;
+    VARIABLE_RE.lastIndex = 0;
+    let match;
+    while (match = VARIABLE_RE.exec(node.text)) {
+      const value = lookup(data, match[1]);
+      if (value !== null) {
+        edits.push({ from: pos + match.index, to: pos + match.index + match[0].length, value });
+      }
+    }
+  });
+  if (!edits.length) return false;
+  const tr = state.tr;
+  edits.reverse().forEach(({ from, to, value }) => tr.insertText(value, from, to));
+  editor.view.dispatch(tr);
+  return true;
+};
+var replaceVariablesInString = (content, data) => String(content != null ? content : "").replace(VARIABLE_RE, (whole, key) => {
+  var _a;
+  return (_a = lookup(data, key)) != null ? _a : whole;
+});
+
+export {
+  replaceVariables,
+  replaceVariablesInString
+};
+//# sourceMappingURL=chunk-DCMBE2J7.js.map

package/dist/chunk-DCMBE2J7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/editor/variables.js"],"sourcesContent":["const VARIABLE_RE = /\\{\\{\\s*([^{}]+?)\\s*\\}\\}/g;\n\nconst lookup = (data, key) => {\n  const value = data?.[key];\n  if (value === null || value === undefined || value === '') return null;\n  return String(value);\n};\n\n// Replaces {{key}} placeholders in text with values from `data`, keeping the\n// text's formatting. Unknown keys are left untouched.\nexport const replaceVariables = (editor, data) => {\n  if (!editor || editor.isDestroyed || !data || !Object.keys(data).length) return false;\n  const { state } = editor;\n  const edits = [];\n  state.doc.descendants((node, pos) => {\n    if (!node.isText || !node.text.includes('{{')) return;\n    VARIABLE_RE.lastIndex = 0;\n    let match;\n    while ((match = VARIABLE_RE.exec(node.text))) {\n      const value = lookup(data, match[1]);\n      if (value !== null) {\n        edits.push({ from: pos + match.index, to: pos + match.index + match[0].length, value });\n      }\n    }\n  });\n  if (!edits.length) return false;\n  const tr = state.tr;\n  edits.reverse().forEach(({ from, to, value }) => tr.insertText(value, from, to));\n  editor.view.dispatch(tr);\n  return true;\n};\n\nexport const replaceVariablesInString = (content, data) =>\n  String(content ?? '').replace(VARIABLE_RE, (whole, key) => lookup(data, key) ?? whole);\n"],"mappings":";AAAA,IAAM,cAAc;AAEpB,IAAM,SAAS,CAAC,MAAM,QAAQ;AAC5B,QAAM,QAAQ,6BAAO;AACrB,MAAI,UAAU,QAAQ,UAAU,UAAa,UAAU,GAAI,QAAO;AAClE,SAAO,OAAO,KAAK;AACrB;AAIO,IAAM,mBAAmB,CAAC,QAAQ,SAAS;AAChD,MAAI,CAAC,UAAU,OAAO,eAAe,CAAC,QAAQ,CAAC,OAAO,KAAK,IAAI,EAAE,OAAQ,QAAO;AAChF,QAAM,EAAE,MAAM,IAAI;AAClB,QAAM,QAAQ,CAAC;AACf,QAAM,IAAI,YAAY,CAAC,MAAM,QAAQ;AACnC,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,KAAK,SAAS,IAAI,EAAG;AAC/C,gBAAY,YAAY;AACxB,QAAI;AACJ,WAAQ,QAAQ,YAAY,KAAK,KAAK,IAAI,GAAI;AAC5C,YAAM,QAAQ,OAAO,MAAM,MAAM,CAAC,CAAC;AACnC,UAAI,UAAU,MAAM;AAClB,cAAM,KAAK,EAAE,MAAM,MAAM,MAAM,OAAO,IAAI,MAAM,MAAM,QAAQ,MAAM,CAAC,EAAE,QAAQ,MAAM,CAAC;AAAA,MACxF;AAAA,IACF;AAAA,EACF,CAAC;AACD,MAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,QAAM,KAAK,MAAM;AACjB,QAAM,QAAQ,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,MAAM,MAAM,GAAG,WAAW,OAAO,MAAM,EAAE,CAAC;AAC/E,SAAO,KAAK,SAAS,EAAE;AACvB,SAAO;AACT;AAEO,IAAM,2BAA2B,CAAC,SAAS,SAChD,OAAO,4BAAW,EAAE,EAAE,QAAQ,aAAa,CAAC,OAAO,QAAK;AAjC1D;AAiC6D,sBAAO,MAAM,GAAG,MAAhB,YAAqB;AAAA,CAAK;","names":[]}