@squiz/formatted-text-editor 1.57.1-alpha.3 → 1.58.1-alpha.0

package/lib/Editor/Editor.d.ts

@@ -8,6 +8,8 @@ type EditorProps = {
     border?: boolean;
     children?: ReactNode;
     isFocused?: boolean;
+    label?: string;
+    attributes?: Record<string, string>;
 };
-declare const Editor: ({ content, className, border, editable, onChange, children, isFocused }: EditorProps) => JSX.Element;
+declare const Editor: ({ content, className, border, editable, onChange, children, isFocused, attributes, }: EditorProps) => JSX.Element;
 export default Editor;

package/lib/Editor/Editor.js

@@ -47,7 +47,7 @@ const WrappedEditor = () => {
     (0, react_2.useEditorEvent)('paste', preventImagePaste);
     return react_1.default.createElement(react_2.EditorComponent, null);
 };
-const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused }) => {
+const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused, attributes, }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
         extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext), (0, react_1.useContext)(resource_browser_1.ResourceBrowserContext)),
         content,
@@ -66,7 +66,7 @@ const Editor = ({ content, className, border = true, editable = true, onChange,
         }
     }, []);
     return (react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('squiz-fte-scope', 'squiz-fte-scope__editor', !editable && 'squiz-fte-scope__editor--is-disabled', border && 'squiz-fte-scope__editor--bordered', className) },
-        react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor" },
+        react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor", attributes: attributes },
             editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible }),
             children && react_1.default.createElement("div", { className: "squiz-fte-scope__editor__children" }, children),
             react_1.default.createElement(WrappedEditor, null),

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts

@@ -1,9 +1,11 @@
 import { ProsemirrorNode } from 'remirror';
 import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
+type FormattedText = FormattedTextModels.v1.FormattedText;
 export declare const resolveNodeTag: (node: ProsemirrorNode) => string;
 /**
  * Converts Remirror node JSON structure to Squiz component JSON structure.
  * @param {ProsemirrorNode} node Remirror node to convert to component.
  * @returns {FormattedText} The converted Squiz component JSON.
  */
-export declare const remirrorNodeToSquizNode: (node: ProsemirrorNode) => FormattedTextModels.v1.FormattedText;
+export declare const remirrorNodeToSquizNode: (node: ProsemirrorNode) => FormattedText | undefined;
+export {};

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.remirrorNodeToSquizNode = exports.resolveNodeTag = void 0;
+const remirror_1 = require("remirror");
 const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
 const Extensions_1 = require("../../../Extensions/Extensions");
 const resolveNodeTag = (node) => {
@@ -62,7 +63,9 @@ const transformAttributes = (attributes) => {
 };
 const transformFragment = (fragment) => {
     const transformed = [];
-    fragment.forEach((child) => transformed.push(transformNode(child)));
+    fragment.forEach((child) => {
+        transformed.push(transformNode(child));
+    });
     return transformed;
 };
 const transformNode = (node) => {
@@ -178,6 +181,12 @@ const remirrorNodeToSquizNode = (node) => {
     if (node?.type?.name !== 'doc') {
         throw new Error('Unable to convert from Remirror to Node data structure, unexpected node provided.');
     }
-    return transformFragment(node.content);
+    // Squiz FormattedText should be set to undefined
+    // To allow validation on required values
+    if ((0, remirror_1.isDocNodeEmpty)(node) || node.childCount === 0) {
+        return undefined;
+    }
+    const transformedFragment = transformFragment(node.content);
+    return transformedFragment;
 };
 exports.remirrorNodeToSquizNode = remirrorNodeToSquizNode;

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts

@@ -6,4 +6,4 @@ import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-sch
  * @export
  * @returns {RemirrorJSON} The converted Remirror JSON.
  */
-export declare const squizNodeToRemirrorNode: (nodes: FormattedTextModels.v1.FormattedText) => RemirrorJSON;
+export declare const squizNodeToRemirrorNode: (nodes?: FormattedTextModels.v1.FormattedText) => RemirrorJSON;

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -143,7 +143,7 @@ const formatNode = (node) => {
  * @export
  * @returns {RemirrorJSON} The converted Remirror JSON.
  */
-const squizNodeToRemirrorNode = (nodes) => {
+const squizNodeToRemirrorNode = (nodes = []) => {
     let children = [];
     nodes.forEach((node) => {
         try {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.57.1-alpha.3",
+  "version": "1.58.1-alpha.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
     "build": "vite build",
-    "clean": "rimraf ./lib",
+    "clean": "rimraf ./lib tsconfig.tsbuildinfo",
     "compile": "npm run clean && npm run compile:styles && npm run compile:code",
     "compile:code": "tsc",
     "compile:styles": "node build.js",
@@ -19,8 +19,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.57.1-alpha.3",
-    "@squiz/resource-browser": "1.57.1-alpha.3",
+    "@squiz/dx-json-schema-lib": "1.58.1-alpha.0",
+    "@squiz/resource-browser": "1.58.1-alpha.0",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -74,5 +74,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "011ad01997d841dd9ab39dbb519af275d11f9dc2"
+  "gitHead": "e1147337893bb889e9c5d3a5e6fd0b8ab893e407"
 }

package/src/Editor/Editor.tsx

@@ -17,6 +17,8 @@ type EditorProps = {
   border?: boolean;
   children?: ReactNode;
   isFocused?: boolean;
+  label?: string;
+  attributes?: Record<string, string>;
 };
 
 const WrappedEditor = () => {
@@ -35,7 +37,16 @@ const WrappedEditor = () => {
   return <EditorComponent />;
 };
 
-const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused }: EditorProps) => {
+const Editor = ({
+  content,
+  className,
+  border = true,
+  editable = true,
+  onChange,
+  children,
+  isFocused,
+  attributes,
+}: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: createExtensions(useContext(EditorContext), useContext(ResourceBrowserContext)),
     content,
@@ -77,6 +88,7 @@ const Editor = ({ content, className, border = true, editable = true, onChange,
         onChange={handleChange}
         placeholder="Write something"
         label="Text editor"
+        attributes={attributes}
       >
         {editable && <Toolbar isVisible={isVisible} />}
         {children && <div className="squiz-fte-scope__editor__children">{children}</div>}

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts

@@ -457,7 +457,7 @@ describe('remirrorNodeToSquizNode', () => {
     const { editor } = await renderWithEditor(null, { content });
 
     const result = remirrorNodeToSquizNode(editor.doc);
-    expect(result).toEqual([]);
+    expect(result).toBeUndefined();
   });
 
   it.each(sharedNodeExamples)(
@@ -491,6 +491,17 @@ describe('remirrorNodeToSquizNode', () => {
 
     expect(() => remirrorNodeToSquizNode(editor.doc)).toThrow('Unsupported mark "sup" was applied to node.');
   });
+
+  it('should ignore empty root node', async () => {
+    const { editor } = await renderWithEditor(null, {
+      content: {
+        type: 'doc',
+        content: [{ type: 'paragraph', content: [] }],
+      },
+    });
+
+    expect(remirrorNodeToSquizNode(editor.doc)).toBeUndefined();
+  });
 });
 
 describe('resolveNodeTag', () => {

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts

@@ -1,4 +1,4 @@
-import { ProsemirrorNode, Fragment as ProsemirrorFragment, Mark } from 'remirror';
+import { ProsemirrorNode, Fragment as ProsemirrorFragment, Mark, isDocNodeEmpty } from 'remirror';
 import { Attrs } from 'prosemirror-model';
 import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
 import { undefinedIfEmpty } from '../../undefinedIfEmpty';
@@ -90,7 +90,9 @@ const transformAttributes = (attributes: Attrs): Record<string, string> => {
 const transformFragment = (fragment: Fragment): FormattedText => {
   const transformed: FormattedText = [];
 
-  fragment.forEach((child) => transformed.push(transformNode(child)));
+  fragment.forEach((child) => {
+    transformed.push(transformNode(child));
+  });
 
   return transformed;
 };
@@ -216,10 +218,17 @@ const transformMark = (mark: Mark, node: FormattedNode): FormattedNode => {
  * @param {ProsemirrorNode} node Remirror node to convert to component.
  * @returns {FormattedText} The converted Squiz component JSON.
  */
-export const remirrorNodeToSquizNode = (node: ProsemirrorNode): FormattedText => {
+export const remirrorNodeToSquizNode = (node: ProsemirrorNode): FormattedText | undefined => {
   if (node?.type?.name !== 'doc') {
     throw new Error('Unable to convert from Remirror to Node data structure, unexpected node provided.');
   }
 
-  return transformFragment(node.content);
+  // Squiz FormattedText should be set to undefined
+  // To allow validation on required values
+  if (isDocNodeEmpty(node) || node.childCount === 0) {
+    return undefined;
+  }
+
+  const transformedFragment = transformFragment(node.content);
+  return transformedFragment;
 };

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -160,7 +160,7 @@ const formatNode = (node: FormattedNodes): RemirrorJSON[] => {
  * @export
  * @returns {RemirrorJSON} The converted Remirror JSON.
  */
-export const squizNodeToRemirrorNode = (nodes: FormattedText): RemirrorJSON => {
+export const squizNodeToRemirrorNode = (nodes: FormattedText = []): RemirrorJSON => {
   let children: RemirrorJSON[] = [];
 
   nodes.forEach((node) => {