@phuong-tran-redoc/document-engine-core 0.1.7 → 0.1.8

package/README.md

@@ -112,6 +112,11 @@ const saved = toCkHtml(editor.getHTML(), { wrapperClass: wrapperClass ?? false }
 verifyCkRoundTrip(storedHtml, saved); // before editing: is the document reproduced exactly?
 ```
 
+CKEditor restricted-editing exceptions (`<span class="restricted-editing-exception">`) load as editable
+regions when `EditableRegion` and `RestrictedEditing` are registered, and are saved back in that markup. In
+restricted mode, set content with `editor.chain().setMeta('restrictedEditing', { allow: true }).setContent(html).run()`
+— otherwise the restriction blocks the change once the document is not empty.
+
 On a backend (no DOM) pass a parser. `createCkDomParser()` uses happy-dom, which `@tiptap/html` already installs:
 
 ```typescript

package/index.esm.js

@@ -61,8 +61,8 @@ function absoluteLengthToPx(value) {
  *   `data-ck` attribute that the {@link CkCompat} extension carries through editing.
  * - {@link toCkHtml} runs on `editor.getHTML()`. It rebuilds the CKEditor markup from those
  *   records: attribute order, `prop:value;` style formatting, `<figure class="table">`,
- *   `<colgroup>`, bare text in single-paragraph cells, `<i>`, page breaks, dynamic fields and
- *   the wrapper. Anything the user changed is taken from the editor; anything the editor does
+ *   `<colgroup>`, bare text in single-paragraph cells, `<i>`, page breaks, dynamic fields,
+ *   restricted-editing exceptions and the wrapper. Anything the user changed is taken from the editor; anything the editor does
  *   not model is kept verbatim.
  *
  * Both functions need a `DOMParser`. In the browser the global one is used. In Node (no global DOM)
@@ -87,6 +87,7 @@ const CK_UNSUPPORTED_CONTENT = {
     dynamicImage: '.redr-dynamic-image',
     dealTable: '.redr-deal-table',
     editorColumn: '.redr-editor-column',
+    /** @deprecated Supported since 0.1.8 (loads as an editable region); no longer reported. */
     restrictedEditingException: '.restricted-editing-exception',
     image: 'img, figure.image',
 };
@@ -122,6 +123,8 @@ const DEFAULT_CELL_VERTICAL_ALIGN = 'middle';
 const NEUTRAL_DECLARATIONS = new Set(['margin-left:0px', 'margin-left:0', 'margin-left:nullpx']);
 const DYNAMIC_FIELD_BASE_CLASSES = ['red-dynamic-field', 'inline-field', 'redr-handlebar-field'];
 const DYNAMIC_FIELD_HAS_VALUE_CLASS = 'red-dynamic-field--has-value';
+/** Markup of CKEditor's restricted-editing exception (an editable region). */
+const EDITABLE_REGION_CK_CLASS = 'restricted-editing-exception';
 const PAGE_BREAK_HTML = '<div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>';
 function parse(html, domParser) {
     if (!domParser && typeof DOMParser === 'undefined') {
@@ -257,7 +260,7 @@ function fromCkHtml(html, options = {}) {
         origin.c = Array.from(cols).map(attrsOf);
         writeOrigin(table, origin);
     });
-    const unsupported = Object.keys(CK_UNSUPPORTED_CONTENT).filter((key) => body.querySelector(CK_UNSUPPORTED_CONTENT[key]));
+    const unsupported = Object.keys(CK_UNSUPPORTED_CONTENT).filter((key) => key !== 'restrictedEditingException' && body.querySelector(CK_UNSUPPORTED_CONTENT[key]));
     return { html: body.innerHTML, wrapperClass, unsupported };
 }
 /**
@@ -480,6 +483,33 @@ function exportDynamicFields(body) {
         el.replaceWith(span);
     });
 }
+/**
+ * Write editable regions as CKEditor restricted-editing exceptions. The editor fills a region it
+ * creates empty with a zero-width space (and refills one emptied in restricted mode with a space);
+ * a region left without text is written as `&nbsp;` so it stays in the document (CKEditor's
+ * empty-content convention). The exception class is always kept, whatever the record says: it is
+ * what identifies the region in stored HTML.
+ */
+function exportEditableRegions(body) {
+    body.querySelectorAll('span[data-editable-region]').forEach((el) => {
+        var _a, _b, _c;
+        const span = el.ownerDocument.createElement('span');
+        setAttributesInOrder(span, (_b = (_a = readOrigin(el)) === null || _a === void 0 ? void 0 : _a.a) !== null && _b !== void 0 ? _b : [['class', EDITABLE_REGION_CK_CLASS]]);
+        if (!span.classList.contains(EDITABLE_REGION_CK_CLASS))
+            span.classList.add(EDITABLE_REGION_CK_CLASS);
+        span.append(...Array.from(el.childNodes));
+        stripZeroWidthSpaces(span);
+        if (!((_c = span.textContent) === null || _c === void 0 ? void 0 : _c.trim()))
+            span.textContent = '\u00a0';
+        el.replaceWith(span);
+    });
+}
+function stripZeroWidthSpaces(node) {
+    var _a;
+    if (node.nodeType === 3)
+        node.nodeValue = ((_a = node.nodeValue) !== null && _a !== void 0 ? _a : '').replace(/\u200b/g, '');
+    node.childNodes.forEach(stripZeroWidthSpaces);
+}
 /**
  * Tiptap's `TrailingNode` appends an empty paragraph whenever a document ends in a table or other
  * non-paragraph block. CKEditor allows that ending, so drop the paragraph unless the source had it.
@@ -555,12 +585,15 @@ function toCkHtml(html, options = {}) {
     const probe = body.ownerDocument.createElement('span');
     exportDynamicFields(body);
     exportPageBreaks(body);
+    exportEditableRegions(body);
     // Reconcile plain elements before tables restructure cells (so `<p>` attributes are final).
     body.querySelectorAll('*').forEach((el) => {
         var _a, _b;
         const tag = el.tagName.toLowerCase();
         if (tag === 'col' || el.closest('div.page-break') || el.matches('span[id^="red-dynamic-field"]'))
             return;
+        if (el.matches(`span.${EDITABLE_REGION_CK_CLASS}`))
+            return;
         reconcileElement(el, (_b = (_a = readOrigin(el)) === null || _a === void 0 ? void 0 : _a.a) !== null && _b !== void 0 ? _b : null, probe);
     });
     dropTrailingNode(body);
@@ -605,6 +638,7 @@ const CK_COMPAT_TYPES = [
     'link',
     'dynamicField',
     'pageBreak',
+    'editableRegion',
 ];
 const ckOrigin = (fallback) => ({
     default: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phuong-tran-redoc/document-engine-core",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "license": "MIT",
   "author": "Realestatedoc (Redoc)",

package/src/compat/ckeditor/ck-html.d.ts

@@ -9,8 +9,8 @@
  *   `data-ck` attribute that the {@link CkCompat} extension carries through editing.
  * - {@link toCkHtml} runs on `editor.getHTML()`. It rebuilds the CKEditor markup from those
  *   records: attribute order, `prop:value;` style formatting, `<figure class="table">`,
- *   `<colgroup>`, bare text in single-paragraph cells, `<i>`, page breaks, dynamic fields and
- *   the wrapper. Anything the user changed is taken from the editor; anything the editor does
+ *   `<colgroup>`, bare text in single-paragraph cells, `<i>`, page breaks, dynamic fields,
+ *   restricted-editing exceptions and the wrapper. Anything the user changed is taken from the editor; anything the editor does
  *   not model is kept verbatim.
  *
  * Both functions need a `DOMParser`. In the browser the global one is used. In Node (no global DOM)
@@ -61,6 +61,7 @@ export declare const CK_UNSUPPORTED_CONTENT: {
     readonly dynamicImage: ".redr-dynamic-image";
     readonly dealTable: ".redr-deal-table";
     readonly editorColumn: ".redr-editor-column";
+    /** @deprecated Supported since 0.1.8 (loads as an editable region); no longer reported. */
     readonly restrictedEditingException: ".restricted-editing-exception";
     readonly image: "img, figure.image";
 };