@squiz/formatted-text-editor 2.3.0 → 2.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/lib/Editor/Editor.d.ts +16 -0
- package/lib/Editor/Editor.js +85 -0
- package/lib/Editor/EditorContext.d.ts +10 -0
- package/lib/Editor/EditorContext.js +16 -0
- package/lib/EditorToolbar/FloatingToolbar.d.ts +2 -0
- package/lib/EditorToolbar/FloatingToolbar.js +76 -0
- package/lib/EditorToolbar/Toolbar.d.ts +7 -0
- package/lib/EditorToolbar/Toolbar.js +49 -0
- package/lib/EditorToolbar/Tools/Bold/BoldButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Bold/BoldButton.js +23 -0
- package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.js +57 -0
- package/lib/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.d.ts +3 -0
- package/lib/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.js +104 -0
- package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.js +25 -0
- package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts +19 -0
- package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js +186 -0
- package/lib/EditorToolbar/Tools/Image/ImageButton.d.ts +6 -0
- package/lib/EditorToolbar/Tools/Image/ImageButton.js +79 -0
- package/lib/EditorToolbar/Tools/Image/ImageModal.d.ts +9 -0
- package/lib/EditorToolbar/Tools/Image/ImageModal.js +26 -0
- package/lib/EditorToolbar/Tools/Italic/ItalicButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Italic/ItalicButton.js +23 -0
- package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts +19 -0
- package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js +63 -0
- package/lib/EditorToolbar/Tools/Link/LinkButton.d.ts +6 -0
- package/lib/EditorToolbar/Tools/Link/LinkButton.js +71 -0
- package/lib/EditorToolbar/Tools/Link/LinkModal.d.ts +9 -0
- package/lib/EditorToolbar/Tools/Link/LinkModal.js +27 -0
- package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.d.ts +4 -0
- package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js +54 -0
- package/lib/EditorToolbar/Tools/Lists/ListButtons.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Lists/ListButtons.js +14 -0
- package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Lists/OrderedList/OrderedListButton.js +22 -0
- package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Lists/UnorderedList/UnorderedListButton.js +22 -0
- package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Redo/RedoButton.js +22 -0
- package/lib/EditorToolbar/Tools/Table/TableButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Table/TableButton.js +20 -0
- package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js +21 -0
- package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts +6 -0
- package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +37 -0
- package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +21 -0
- package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +22 -0
- package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts +3 -0
- package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js +46 -0
- package/lib/EditorToolbar/Tools/Underline/UnderlineButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Underline/UnderlineButton.js +23 -0
- package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts +3 -0
- package/lib/EditorToolbar/Tools/Undo/UndoButton.js +22 -0
- package/lib/EditorToolbar/index.d.ts +2 -0
- package/lib/EditorToolbar/index.js +18 -0
- package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.d.ts +5 -0
- package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.js +63 -0
- package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.d.ts +5 -0
- package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.js +30 -0
- package/lib/Extensions/CommandsExtension/CommandsExtension.d.ts +20 -0
- package/lib/Extensions/CommandsExtension/CommandsExtension.js +52 -0
- package/lib/Extensions/Extensions.d.ts +18 -0
- package/lib/Extensions/Extensions.js +76 -0
- package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.d.ts +12 -0
- package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js +69 -0
- package/lib/Extensions/ImageExtension/AssetImageExtension.d.ts +17 -0
- package/lib/Extensions/ImageExtension/AssetImageExtension.js +91 -0
- package/lib/Extensions/ImageExtension/DAMImageExtension.d.ts +17 -0
- package/lib/Extensions/ImageExtension/DAMImageExtension.js +97 -0
- package/lib/Extensions/ImageExtension/ImageExtension.d.ts +7 -0
- package/lib/Extensions/ImageExtension/ImageExtension.js +18 -0
- package/lib/Extensions/LinkExtension/AssetLinkExtension.d.ts +27 -0
- package/lib/Extensions/LinkExtension/AssetLinkExtension.js +101 -0
- package/lib/Extensions/LinkExtension/LinkExtension.d.ts +23 -0
- package/lib/Extensions/LinkExtension/LinkExtension.js +87 -0
- package/lib/Extensions/LinkExtension/common.d.ts +7 -0
- package/lib/Extensions/LinkExtension/common.js +14 -0
- package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +12 -0
- package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +76 -0
- package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.d.ts +10 -0
- package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.js +76 -0
- package/lib/Icons/AiIcon.d.ts +2 -0
- package/lib/Icons/AiIcon.js +60 -0
- package/lib/hooks/index.d.ts +2 -0
- package/lib/hooks/index.js +18 -0
- package/lib/hooks/useExpandedSelection.d.ts +23 -0
- package/lib/hooks/useExpandedSelection.js +37 -0
- package/lib/hooks/useExtensionNames.d.ts +1 -0
- package/lib/hooks/useExtensionNames.js +16 -0
- package/lib/hooks/useFocus.d.ts +8 -0
- package/lib/hooks/useFocus.js +43 -0
- package/lib/index.css +5889 -0
- package/lib/index.d.ts +8 -0
- package/lib/index.js +16 -0
- package/lib/types.d.ts +7 -0
- package/lib/types.js +2 -0
- package/lib/ui/Button/Button.d.ts +12 -0
- package/lib/ui/Button/Button.js +13 -0
- package/lib/ui/CollapseBox/CollapseBox.d.ts +7 -0
- package/lib/ui/CollapseBox/CollapseBox.js +48 -0
- package/lib/ui/Fields/Checkbox/Checkbox.d.ts +9 -0
- package/lib/ui/Fields/Checkbox/Checkbox.js +47 -0
- package/lib/ui/Fields/Input/Input.d.ts +3 -0
- package/lib/ui/Fields/Input/Input.js +33 -0
- package/lib/ui/Fields/InputContainer/InputContainer.d.ts +9 -0
- package/lib/ui/Fields/InputContainer/InputContainer.js +16 -0
- package/lib/ui/Fields/MatrixAsset/MatrixAsset.d.ts +19 -0
- package/lib/ui/Fields/MatrixAsset/MatrixAsset.js +30 -0
- package/lib/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.d.ts +28 -0
- package/lib/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.js +88 -0
- package/lib/ui/Modal/FormModal.d.ts +5 -0
- package/lib/ui/Modal/FormModal.js +39 -0
- package/lib/ui/Modal/Modal.d.ts +11 -0
- package/lib/ui/Modal/Modal.js +79 -0
- package/lib/ui/Tabs/Tabs.d.ts +11 -0
- package/lib/ui/Tabs/Tabs.js +46 -0
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts +7 -0
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +48 -0
- package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.d.ts +11 -0
- package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.js +15 -0
- package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.d.ts +5 -0
- package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.js +23 -0
- package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.props.d.ts +3 -0
- package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.props.js +2 -0
- package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.d.ts +11 -0
- package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js +238 -0
- package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.d.ts +9 -0
- package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js +214 -0
- package/lib/utils/createToolbarPositioner.d.ts +18 -0
- package/lib/utils/createToolbarPositioner.js +96 -0
- package/lib/utils/getCursorRect.d.ts +2 -0
- package/lib/utils/getCursorRect.js +7 -0
- package/lib/utils/getMarkNamesByGroup.d.ts +2 -0
- package/lib/utils/getMarkNamesByGroup.js +9 -0
- package/lib/utils/getNodeNamesByGroup.d.ts +2 -0
- package/lib/utils/getNodeNamesByGroup.js +9 -0
- package/lib/utils/getShortcutSymbol.d.ts +1 -0
- package/lib/utils/getShortcutSymbol.js +8 -0
- package/lib/utils/undefinedIfEmpty.d.ts +1 -0
- package/lib/utils/undefinedIfEmpty.js +7 -0
- package/lib/utils/validation.d.ts +3 -0
- package/lib/utils/validation.js +16 -0
- package/package.json +1 -1
@@ -0,0 +1,48 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
3
|
+
if (k2 === undefined) k2 = k;
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
7
|
+
}
|
8
|
+
Object.defineProperty(o, k2, desc);
|
9
|
+
}) : (function(o, m, k, k2) {
|
10
|
+
if (k2 === undefined) k2 = k;
|
11
|
+
o[k2] = m[k];
|
12
|
+
}));
|
13
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
14
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
15
|
+
}) : function(o, v) {
|
16
|
+
o["default"] = v;
|
17
|
+
});
|
18
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
19
|
+
if (mod && mod.__esModule) return mod;
|
20
|
+
var result = {};
|
21
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
22
|
+
__setModuleDefault(result, mod);
|
23
|
+
return result;
|
24
|
+
};
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
27
|
+
};
|
28
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
29
|
+
const react_1 = __importStar(require("react"));
|
30
|
+
const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
|
31
|
+
const ToolbarDropdown = ({ children, label }) => {
|
32
|
+
const [isOpen, setOpen] = (0, react_1.useState)(false);
|
33
|
+
const handleDropDown = () => {
|
34
|
+
setOpen(!isOpen);
|
35
|
+
};
|
36
|
+
const handleBlur = (event) => {
|
37
|
+
if (event.relatedTarget?.id !== 'dropdownMenuButton' && !event.target?.className.includes('is-active')) {
|
38
|
+
isOpen && handleDropDown();
|
39
|
+
}
|
40
|
+
};
|
41
|
+
return (react_1.default.createElement("div", { className: "toolbar-dropdown", onBlur: handleBlur },
|
42
|
+
react_1.default.createElement("button", { id: "dropdownHoverButton", className: "toolbar-dropdown__button", type: "button", onClick: handleDropDown },
|
43
|
+
react_1.default.createElement("span", { className: "toolbar-dropdown__label" }, label),
|
44
|
+
react_1.default.createElement(ExpandMore_1.default, { className: "toolbar-dropdown__icon", "aria-hidden": "true" })),
|
45
|
+
react_1.default.createElement("div", { id: "dropdown", className: `toolbar-dropdown__menu z-10 ${isOpen ? 'block' : 'hidden'} bg-white divide-y w-169` },
|
46
|
+
react_1.default.createElement("ul", { "aria-labelledby": "dropdownHoverButton", onClick: handleDropDown }, children))));
|
47
|
+
};
|
48
|
+
exports.default = ToolbarDropdown;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
type DropdownButtonProps = {
|
3
|
+
children?: JSX.Element;
|
4
|
+
handleOnClick: () => void;
|
5
|
+
isDisabled: boolean;
|
6
|
+
isActive: boolean;
|
7
|
+
label: string;
|
8
|
+
icon?: JSX.Element;
|
9
|
+
};
|
10
|
+
declare const DropdownButton: ({ children, handleOnClick, isDisabled, isActive, label, icon }: DropdownButtonProps) => React.JSX.Element;
|
11
|
+
export default DropdownButton;
|
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
4
|
+
};
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
6
|
+
const react_1 = __importDefault(require("react"));
|
7
|
+
const CheckRounded_1 = __importDefault(require("@mui/icons-material/CheckRounded"));
|
8
|
+
const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label, icon }) => {
|
9
|
+
return (react_1.default.createElement("button", { "aria-label": label, id: "dropdownMenuButton", title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
|
10
|
+
react_1.default.createElement("div", { className: "dropdown-button-label" },
|
11
|
+
icon && icon,
|
12
|
+
children || label),
|
13
|
+
isActive && react_1.default.createElement(CheckRounded_1.default, { className: "dropdown-button-icon" })));
|
14
|
+
};
|
15
|
+
exports.default = DropdownButton;
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import { FORMATTED_TEXT_MODELS } from '@squiz/dx-json-schema-lib';
|
2
|
+
import { HtmlToSquizNodeProps } from './htmlToSquizNode.props';
|
3
|
+
type FormattedText = FORMATTED_TEXT_MODELS.v1.FormattedText;
|
4
|
+
export declare const htmlToSquizNode: ({ content }: HtmlToSquizNodeProps) => FormattedText | undefined;
|
5
|
+
export {};
|
@@ -0,0 +1,23 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.htmlToSquizNode = void 0;
|
4
|
+
const remirror_1 = require("remirror");
|
5
|
+
const remirrorNodeToSquizNode_1 = require("../remirrorNodeToSquizNode/remirrorNodeToSquizNode");
|
6
|
+
const core_1 = require("@remirror/core");
|
7
|
+
const Extensions_1 = require("../../../Extensions/Extensions");
|
8
|
+
const htmlToSquizNode = ({ content }) => {
|
9
|
+
const extensions = (0, Extensions_1.createExtensions)({
|
10
|
+
matrix: {
|
11
|
+
matrixDomain: 'unsupported',
|
12
|
+
},
|
13
|
+
resolveNodeToUrl: () => {
|
14
|
+
throw new Error('Resolving Url is not supported.');
|
15
|
+
},
|
16
|
+
});
|
17
|
+
const manager = core_1.RemirrorManager.create(extensions);
|
18
|
+
return (0, remirrorNodeToSquizNode_1.remirrorNodeToSquizNode)((0, remirror_1.htmlToProsemirrorNode)({
|
19
|
+
content,
|
20
|
+
schema: manager.schema,
|
21
|
+
}));
|
22
|
+
};
|
23
|
+
exports.htmlToSquizNode = htmlToSquizNode;
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { ProsemirrorNode } from 'remirror';
|
2
|
+
import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
|
3
|
+
type FormattedText = FormattedTextModels.v1.FormattedText;
|
4
|
+
export declare const resolveNodeTag: (node: ProsemirrorNode) => string;
|
5
|
+
/**
|
6
|
+
* Converts Remirror node JSON structure to Squiz component JSON structure.
|
7
|
+
* @param {ProsemirrorNode} node Remirror node to convert to component.
|
8
|
+
* @returns {FormattedText} The converted Squiz component JSON.
|
9
|
+
*/
|
10
|
+
export declare const remirrorNodeToSquizNode: (node: ProsemirrorNode) => FormattedText | undefined;
|
11
|
+
export {};
|
@@ -0,0 +1,238 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.remirrorNodeToSquizNode = exports.resolveNodeTag = void 0;
|
4
|
+
const remirror_1 = require("remirror");
|
5
|
+
const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
|
6
|
+
const Extensions_1 = require("../../../Extensions/Extensions");
|
7
|
+
const resolveNodeTag = (node) => {
|
8
|
+
if (node.type.name === Extensions_1.NodeName.Text) {
|
9
|
+
return 'span';
|
10
|
+
}
|
11
|
+
if (node.type.name === Extensions_1.NodeName.CodeBlock) {
|
12
|
+
return 'code';
|
13
|
+
}
|
14
|
+
if (node.type.spec?.toDOM) {
|
15
|
+
const domNode = node.type.spec.toDOM(node);
|
16
|
+
if (domNode instanceof window.Node) {
|
17
|
+
return domNode.nodeName.toLowerCase();
|
18
|
+
}
|
19
|
+
if (typeof domNode === 'object' && 'dom' in domNode && domNode.dom instanceof window.Node) {
|
20
|
+
return domNode.dom.nodeName.toLowerCase();
|
21
|
+
}
|
22
|
+
if (domNode instanceof Array) {
|
23
|
+
// [ tag, attributes, ...children ]
|
24
|
+
return domNode[0].toLowerCase();
|
25
|
+
}
|
26
|
+
}
|
27
|
+
throw new Error('Unexpected Remirror node encountered, cannot resolve tag.');
|
28
|
+
};
|
29
|
+
exports.resolveNodeTag = resolveNodeTag;
|
30
|
+
const resolveFormattingOptions = (node) => {
|
31
|
+
const formattingOptions = {};
|
32
|
+
const textAlignment = node.attrs.nodeTextAlignment;
|
33
|
+
const textAlignmentMap = {
|
34
|
+
none: undefined,
|
35
|
+
left: 'left',
|
36
|
+
right: 'right',
|
37
|
+
center: 'center',
|
38
|
+
start: 'left',
|
39
|
+
end: 'right',
|
40
|
+
justify: 'justify',
|
41
|
+
};
|
42
|
+
if (textAlignment && textAlignmentMap[textAlignment]) {
|
43
|
+
formattingOptions.alignment = textAlignmentMap[textAlignment];
|
44
|
+
}
|
45
|
+
return formattingOptions;
|
46
|
+
};
|
47
|
+
const resolveFontOptions = (node) => {
|
48
|
+
const fontOptions = {};
|
49
|
+
node.marks.forEach((mark) => {
|
50
|
+
switch (mark.type.name) {
|
51
|
+
case 'underline':
|
52
|
+
fontOptions.underline = true;
|
53
|
+
break;
|
54
|
+
}
|
55
|
+
});
|
56
|
+
return fontOptions;
|
57
|
+
};
|
58
|
+
const transformAttributes = (attributes, nodeType) => {
|
59
|
+
const transformed = {};
|
60
|
+
Object.keys(attributes).forEach((key) => {
|
61
|
+
// Component service requires attributes to be a string, cast as needed.
|
62
|
+
if (typeof attributes[key] === 'string' || typeof attributes[key] === 'number') {
|
63
|
+
transformed[key] = String(attributes[key]);
|
64
|
+
}
|
65
|
+
});
|
66
|
+
// We assign an attribute here for table controller cells as we need to differentiate
|
67
|
+
// between them and regular table headers (th)
|
68
|
+
if (nodeType === Extensions_1.NodeName.TableControllerCell) {
|
69
|
+
transformed[nodeType] = 'true';
|
70
|
+
}
|
71
|
+
// Another check here for more specific attributes for tables (column widths)
|
72
|
+
if (nodeType === Extensions_1.NodeName.TableControllerCell || nodeType === Extensions_1.NodeName.tableCell) {
|
73
|
+
if (Array.isArray(attributes.colwidth) && attributes.colwidth[0]) {
|
74
|
+
transformed.colwidth = String(attributes.colwidth[0]);
|
75
|
+
}
|
76
|
+
}
|
77
|
+
return transformed;
|
78
|
+
};
|
79
|
+
const transformFragment = (fragment) => {
|
80
|
+
const transformed = [];
|
81
|
+
fragment.forEach((child) => {
|
82
|
+
transformed.push(transformNode(child));
|
83
|
+
});
|
84
|
+
return transformed;
|
85
|
+
};
|
86
|
+
const transformNode = (node) => {
|
87
|
+
const formattingOptions = (0, undefinedIfEmpty_1.undefinedIfEmpty)(resolveFormattingOptions(node));
|
88
|
+
const font = (0, undefinedIfEmpty_1.undefinedIfEmpty)(resolveFontOptions(node));
|
89
|
+
let attributes;
|
90
|
+
if (node.type.name === Extensions_1.NodeName.Image ||
|
91
|
+
node.type.name === Extensions_1.NodeName.CodeBlock ||
|
92
|
+
node.type.name === Extensions_1.NodeName.TableControllerCell ||
|
93
|
+
node.type.name === Extensions_1.NodeName.tableCell) {
|
94
|
+
attributes = transformAttributes(node.attrs, node.type.name);
|
95
|
+
}
|
96
|
+
let transformedNode = { type: 'text', value: node.text || '' };
|
97
|
+
// Squiz "text" nodes can't have formatting/font options but Remirror "text" nodes can.
|
98
|
+
// If the node has formatting options wrap in a tag.
|
99
|
+
// If the node isn't a text type assume it is a tag type and wrap in a tag.
|
100
|
+
// If we pick the wrong tag here it will be corrected later as part of looping through the
|
101
|
+
// non-font marks.
|
102
|
+
if (node.type.name !== Extensions_1.NodeName.Text || attributes || formattingOptions || font) {
|
103
|
+
transformedNode = {
|
104
|
+
type: 'tag',
|
105
|
+
tag: (0, exports.resolveNodeTag)(node),
|
106
|
+
children: node.type.name === Extensions_1.NodeName.Text ? [transformedNode] : transformFragment(node.content),
|
107
|
+
attributes,
|
108
|
+
formattingOptions,
|
109
|
+
font,
|
110
|
+
};
|
111
|
+
}
|
112
|
+
if (node.type.name === Extensions_1.NodeName.AssetImage) {
|
113
|
+
transformedNode = {
|
114
|
+
type: 'matrix-image',
|
115
|
+
matrixAssetId: node.attrs.matrixAssetId,
|
116
|
+
matrixIdentifier: node.attrs.matrixIdentifier,
|
117
|
+
matrixDomain: node.attrs.matrixDomain,
|
118
|
+
};
|
119
|
+
}
|
120
|
+
if (node.type.name === Extensions_1.NodeName.DAMImage) {
|
121
|
+
transformedNode = {
|
122
|
+
type: 'dam-image',
|
123
|
+
damObjectId: node.attrs.damObjectId,
|
124
|
+
damSystemIdentifier: node.attrs.damSystemIdentifier,
|
125
|
+
damSystemType: node.attrs.damSystemType,
|
126
|
+
damAdditional: node.attrs.damAdditional ? JSON.parse(node.attrs.damAdditional) : undefined,
|
127
|
+
};
|
128
|
+
}
|
129
|
+
node.marks.forEach((mark) => {
|
130
|
+
transformedNode = transformMark(mark, transformedNode);
|
131
|
+
});
|
132
|
+
if (node.type.name === Extensions_1.NodeName.Unsupported) {
|
133
|
+
const unsupportedNode = node.attrs?.originalNode;
|
134
|
+
return { ...unsupportedNode };
|
135
|
+
}
|
136
|
+
return transformedNode;
|
137
|
+
};
|
138
|
+
/**
|
139
|
+
* Merges 2 nodes together if they are compatible without losing any important details.
|
140
|
+
* Otherwise will wrap the node.
|
141
|
+
*
|
142
|
+
* @param {FormattedNode} node
|
143
|
+
* @param {FormattedNodeWithChildren} wrappingNode
|
144
|
+
*
|
145
|
+
* @return {FormattedNode}
|
146
|
+
*/
|
147
|
+
const wrapNodeIfNeeded = (node, wrappingNode, copyFont = true) => {
|
148
|
+
const wrappingNodeChildren = wrappingNode.children || [];
|
149
|
+
if (node.type === 'tag' && wrappingNode.type === 'tag' && (node.tag === 'span' || node.tag === wrappingNode.tag)) {
|
150
|
+
const nodeChildren = node.children || [];
|
151
|
+
// if the node we are wrapping with is a DOM node, and the node being wrapped is
|
152
|
+
// a plain looking DOM node merge the 2 nodes.
|
153
|
+
return {
|
154
|
+
...node,
|
155
|
+
...wrappingNode,
|
156
|
+
formattingOptions: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
|
157
|
+
...node.formattingOptions,
|
158
|
+
...wrappingNode.formattingOptions,
|
159
|
+
}),
|
160
|
+
attributes: (0, undefinedIfEmpty_1.undefinedIfEmpty)({
|
161
|
+
...node.attributes,
|
162
|
+
...wrappingNode.attributes,
|
163
|
+
}),
|
164
|
+
font: (0, undefinedIfEmpty_1.undefinedIfEmpty)(copyFont
|
165
|
+
? {
|
166
|
+
...node.font,
|
167
|
+
...wrappingNode.font,
|
168
|
+
}
|
169
|
+
: {}),
|
170
|
+
children: [...nodeChildren, ...wrappingNodeChildren],
|
171
|
+
};
|
172
|
+
}
|
173
|
+
// if the node we are wrapping or the wrapping nodes are not compatible merge them.
|
174
|
+
return {
|
175
|
+
...wrappingNode,
|
176
|
+
children: [node, ...wrappingNodeChildren],
|
177
|
+
};
|
178
|
+
};
|
179
|
+
const transformMark = (mark, node) => {
|
180
|
+
switch (mark.type.name) {
|
181
|
+
case 'bold':
|
182
|
+
return wrapNodeIfNeeded(node, {
|
183
|
+
type: 'tag',
|
184
|
+
tag: 'strong',
|
185
|
+
children: [],
|
186
|
+
}, false);
|
187
|
+
case 'italic':
|
188
|
+
return wrapNodeIfNeeded(node, {
|
189
|
+
type: 'tag',
|
190
|
+
tag: 'em',
|
191
|
+
children: [],
|
192
|
+
}, false);
|
193
|
+
case 'underline':
|
194
|
+
return wrapNodeIfNeeded(node, {
|
195
|
+
type: 'tag',
|
196
|
+
tag: 'span',
|
197
|
+
children: [],
|
198
|
+
font: {
|
199
|
+
underline: mark.type.name === 'underline',
|
200
|
+
},
|
201
|
+
});
|
202
|
+
case 'link':
|
203
|
+
return wrapNodeIfNeeded(node, {
|
204
|
+
type: 'tag',
|
205
|
+
tag: 'a',
|
206
|
+
attributes: transformAttributes(mark.attrs),
|
207
|
+
children: [],
|
208
|
+
}, false);
|
209
|
+
case 'assetLink':
|
210
|
+
return wrapNodeIfNeeded(node, {
|
211
|
+
type: 'link-to-matrix-asset',
|
212
|
+
target: mark.attrs.target,
|
213
|
+
matrixIdentifier: mark.attrs.matrixIdentifier,
|
214
|
+
matrixDomain: mark.attrs.matrixDomain,
|
215
|
+
matrixAssetId: mark.attrs.matrixAssetId,
|
216
|
+
children: [],
|
217
|
+
});
|
218
|
+
}
|
219
|
+
throw new Error(`Unsupported mark "${mark.type.name}" was applied to node.`);
|
220
|
+
};
|
221
|
+
/**
|
222
|
+
* Converts Remirror node JSON structure to Squiz component JSON structure.
|
223
|
+
* @param {ProsemirrorNode} node Remirror node to convert to component.
|
224
|
+
* @returns {FormattedText} The converted Squiz component JSON.
|
225
|
+
*/
|
226
|
+
const remirrorNodeToSquizNode = (node) => {
|
227
|
+
if (node?.type?.name !== 'doc') {
|
228
|
+
throw new Error('Unable to convert from Remirror to Node data structure, unexpected node provided.');
|
229
|
+
}
|
230
|
+
// Squiz FormattedText should be set to undefined
|
231
|
+
// To allow validation on required values
|
232
|
+
if ((0, remirror_1.isDocNodeEmpty)(node) || node.childCount === 0) {
|
233
|
+
return undefined;
|
234
|
+
}
|
235
|
+
const transformedFragment = transformFragment(node.content);
|
236
|
+
return transformedFragment;
|
237
|
+
};
|
238
|
+
exports.remirrorNodeToSquizNode = remirrorNodeToSquizNode;
|
@@ -0,0 +1,9 @@
|
|
1
|
+
import { RemirrorJSON } from '@remirror/core';
|
2
|
+
import { FORMATTED_TEXT_MODELS as FormattedTextModels } from '@squiz/dx-json-schema-lib';
|
3
|
+
/**
|
4
|
+
* Converts Squiz component JSON structure to Remirror node JSON structure.
|
5
|
+
* @param {FormattedText} nodes Squiz nodes to convert to Remirror.
|
6
|
+
* @export
|
7
|
+
* @returns {RemirrorJSON} The converted Remirror JSON.
|
8
|
+
*/
|
9
|
+
export declare const squizNodeToRemirrorNode: (nodes?: FormattedTextModels.v1.FormattedText) => RemirrorJSON;
|
@@ -0,0 +1,214 @@
|
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.squizNodeToRemirrorNode = void 0;
|
4
|
+
const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
|
5
|
+
const Extensions_1 = require("../../../Extensions/Extensions");
|
6
|
+
const getNodeType = (node) => {
|
7
|
+
const typeMap = {
|
8
|
+
'link-to-matrix-asset': Extensions_1.NodeName.Text,
|
9
|
+
'matrix-image': Extensions_1.NodeName.AssetImage,
|
10
|
+
'dam-image': Extensions_1.NodeName.DAMImage,
|
11
|
+
text: 'text',
|
12
|
+
};
|
13
|
+
const tagMap = {
|
14
|
+
h1: 'heading',
|
15
|
+
h2: 'heading',
|
16
|
+
h3: 'heading',
|
17
|
+
h4: 'heading',
|
18
|
+
h5: 'heading',
|
19
|
+
h6: 'heading',
|
20
|
+
img: 'image',
|
21
|
+
pre: 'preformatted',
|
22
|
+
p: 'paragraph',
|
23
|
+
ol: 'orderedList',
|
24
|
+
li: 'listItem',
|
25
|
+
ul: 'bulletList',
|
26
|
+
hr: 'horizontalRule',
|
27
|
+
table: 'table',
|
28
|
+
tr: 'tableRow',
|
29
|
+
th: 'tableHeaderCell',
|
30
|
+
td: 'tableCell',
|
31
|
+
a: Extensions_1.NodeName.Text,
|
32
|
+
em: Extensions_1.NodeName.Text,
|
33
|
+
span: Extensions_1.NodeName.Text,
|
34
|
+
strong: Extensions_1.NodeName.Text,
|
35
|
+
code: Extensions_1.NodeName.CodeBlock,
|
36
|
+
br: Extensions_1.NodeName.hardBreak,
|
37
|
+
};
|
38
|
+
if (typeMap[node.type]) {
|
39
|
+
return typeMap[node.type];
|
40
|
+
}
|
41
|
+
if (node.type === 'tag' && tagMap[node.tag]) {
|
42
|
+
// This is a specific check case for tables as there are some <th> tags which need to be returned
|
43
|
+
// as table controller cells.
|
44
|
+
if (node.attributes?.tableControllerCell) {
|
45
|
+
return 'tableControllerCell';
|
46
|
+
}
|
47
|
+
// Return regular tag for everything else
|
48
|
+
return tagMap[node.tag];
|
49
|
+
}
|
50
|
+
// Unsupported node type
|
51
|
+
throw new Error(node.type === 'tag'
|
52
|
+
? `Unsupported node type provided: ${node.type} (tag: ${node.tag})`
|
53
|
+
: `Unsupported node type provided: ${node.type}`);
|
54
|
+
};
|
55
|
+
const getNodeAttributes = (node) => {
|
56
|
+
if (node.type === 'tag' && node.tag === 'table') {
|
57
|
+
return {
|
58
|
+
isControllersInjected: true,
|
59
|
+
};
|
60
|
+
}
|
61
|
+
if (node.type === 'tag' && (node.tag === 'th' || node.tag === 'td')) {
|
62
|
+
return {
|
63
|
+
colspan: parseInt(node.attributes?.colspan ?? '1'),
|
64
|
+
rowspan: parseInt(node.attributes?.rowspan ?? '1'),
|
65
|
+
colwidth: node.attributes?.colwidth ? [parseInt(node.attributes.colwidth)] : null,
|
66
|
+
background: null,
|
67
|
+
};
|
68
|
+
}
|
69
|
+
if (node.type === 'tag' && node.tag === 'img') {
|
70
|
+
return {
|
71
|
+
alt: node.attributes?.alt,
|
72
|
+
height: node.attributes?.height,
|
73
|
+
width: node.attributes?.width,
|
74
|
+
src: node.attributes?.src,
|
75
|
+
title: node.attributes?.title,
|
76
|
+
};
|
77
|
+
}
|
78
|
+
else if (node.type === 'tag' && node.tag === 'code') {
|
79
|
+
return {
|
80
|
+
language: node.attributes?.language || 'markup',
|
81
|
+
wrap: node.attributes?.wrap || true,
|
82
|
+
};
|
83
|
+
}
|
84
|
+
else if (node.type === 'matrix-image') {
|
85
|
+
return {
|
86
|
+
matrixAssetId: node.matrixAssetId,
|
87
|
+
matrixDomain: node.matrixDomain,
|
88
|
+
matrixIdentifier: node.matrixIdentifier,
|
89
|
+
};
|
90
|
+
}
|
91
|
+
else if (node.type === 'dam-image') {
|
92
|
+
return {
|
93
|
+
damObjectId: node.damObjectId,
|
94
|
+
damSystemIdentifier: node.damSystemIdentifier,
|
95
|
+
damSystemType: node.damSystemType,
|
96
|
+
damAdditional: node.damAdditional ? JSON.stringify(node.damAdditional) : undefined,
|
97
|
+
};
|
98
|
+
}
|
99
|
+
else if (node.type === 'tag') {
|
100
|
+
return {
|
101
|
+
nodeIndent: null,
|
102
|
+
nodeTextAlignment: node.formattingOptions?.alignment || null,
|
103
|
+
nodeLineHeight: null,
|
104
|
+
style: '',
|
105
|
+
level: node.tag?.startsWith('h') ? parseInt(node.tag.substring(1)) : undefined,
|
106
|
+
};
|
107
|
+
}
|
108
|
+
return {};
|
109
|
+
};
|
110
|
+
const getNodeMarks = (node) => {
|
111
|
+
const marks = [];
|
112
|
+
if (node.type === 'tag' && node.tag === 'a') {
|
113
|
+
marks.push({
|
114
|
+
type: Extensions_1.MarkName.Link,
|
115
|
+
attrs: {
|
116
|
+
href: node.attributes?.href,
|
117
|
+
target: node.attributes?.target ?? null,
|
118
|
+
auto: false,
|
119
|
+
title: node.attributes?.title ?? null,
|
120
|
+
},
|
121
|
+
});
|
122
|
+
}
|
123
|
+
else if (node.type === 'link-to-matrix-asset') {
|
124
|
+
marks.push({
|
125
|
+
type: Extensions_1.MarkName.AssetLink,
|
126
|
+
attrs: {
|
127
|
+
matrixAssetId: node.matrixAssetId,
|
128
|
+
matrixDomain: node.matrixDomain,
|
129
|
+
matrixIdentifier: node.matrixIdentifier,
|
130
|
+
target: node.target,
|
131
|
+
},
|
132
|
+
});
|
133
|
+
}
|
134
|
+
else if (node.type === 'tag' && node.tag === 'strong') {
|
135
|
+
marks.push({ type: 'bold' });
|
136
|
+
}
|
137
|
+
else if (node.type === 'tag' && node.tag === 'em') {
|
138
|
+
marks.push({ type: 'italic' });
|
139
|
+
}
|
140
|
+
// Handle font formatting
|
141
|
+
if ('font' in node && node.font !== undefined) {
|
142
|
+
for (const [type, enabled] of Object.entries(node.font)) {
|
143
|
+
if (enabled) {
|
144
|
+
if (type === 'bold' || type === 'italics' || type === 'underline') {
|
145
|
+
marks.push({ type: type === 'italics' ? 'italic' : type });
|
146
|
+
}
|
147
|
+
else {
|
148
|
+
throw new Error(`Unsupported mark provided: ${type}`);
|
149
|
+
}
|
150
|
+
}
|
151
|
+
}
|
152
|
+
}
|
153
|
+
return marks;
|
154
|
+
};
|
155
|
+
const unwrapNodeIfNeeded = (node) => {
|
156
|
+
if (node.type === 'text' && node.content?.length) {
|
157
|
+
return node.content.map((child) => {
|
158
|
+
return {
|
159
|
+
...child,
|
160
|
+
marks: [...(child.marks || []), ...(node.marks || [])],
|
161
|
+
};
|
162
|
+
});
|
163
|
+
}
|
164
|
+
return [node];
|
165
|
+
};
|
166
|
+
const formatNode = (node) => {
|
167
|
+
const children = [];
|
168
|
+
if ('children' in node) {
|
169
|
+
node.children?.forEach((child) => {
|
170
|
+
children.push(...formatNode(child));
|
171
|
+
});
|
172
|
+
}
|
173
|
+
return unwrapNodeIfNeeded({
|
174
|
+
type: getNodeType(node),
|
175
|
+
attrs: (0, undefinedIfEmpty_1.undefinedIfEmpty)(getNodeAttributes(node)),
|
176
|
+
marks: (0, undefinedIfEmpty_1.undefinedIfEmpty)(getNodeMarks(node)),
|
177
|
+
text: node.type === 'text' ? node.value : undefined,
|
178
|
+
content: (0, undefinedIfEmpty_1.undefinedIfEmpty)(children),
|
179
|
+
});
|
180
|
+
};
|
181
|
+
/**
|
182
|
+
* Converts Squiz component JSON structure to Remirror node JSON structure.
|
183
|
+
* @param {FormattedText} nodes Squiz nodes to convert to Remirror.
|
184
|
+
* @export
|
185
|
+
* @returns {RemirrorJSON} The converted Remirror JSON.
|
186
|
+
*/
|
187
|
+
const squizNodeToRemirrorNode = (nodes = []) => {
|
188
|
+
let children = [];
|
189
|
+
nodes.forEach((node) => {
|
190
|
+
try {
|
191
|
+
children.push(...formatNode(node));
|
192
|
+
}
|
193
|
+
catch (error) {
|
194
|
+
const errorMessage = error instanceof Error ? error.message : 'Unknown error';
|
195
|
+
children.push({
|
196
|
+
type: 'paragraph',
|
197
|
+
content: [
|
198
|
+
{
|
199
|
+
type: Extensions_1.NodeName.Unsupported,
|
200
|
+
attrs: {
|
201
|
+
originalNode: node,
|
202
|
+
errorMessage,
|
203
|
+
},
|
204
|
+
},
|
205
|
+
],
|
206
|
+
});
|
207
|
+
}
|
208
|
+
});
|
209
|
+
if (children.find((child) => child.type === 'text')) {
|
210
|
+
children = [{ type: 'paragraph', content: children }];
|
211
|
+
}
|
212
|
+
return { type: 'doc', content: children };
|
213
|
+
};
|
214
|
+
exports.squizNodeToRemirrorNode = squizNodeToRemirrorNode;
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { Positioner } from 'remirror/extensions';
|
2
|
+
import { Coords } from 'remirror';
|
3
|
+
export type ToolbarPositionerProps = {
|
4
|
+
types: string[];
|
5
|
+
};
|
6
|
+
export type ToolbarPositionerRange = {
|
7
|
+
isSelectionInView: boolean;
|
8
|
+
visible: boolean;
|
9
|
+
marks: Record<string, {
|
10
|
+
isExclusivelyActive: boolean;
|
11
|
+
isActive: boolean;
|
12
|
+
}>;
|
13
|
+
cursor: {
|
14
|
+
from: Coords;
|
15
|
+
to: Coords;
|
16
|
+
};
|
17
|
+
};
|
18
|
+
export declare const createToolbarPositioner: ({ types }: ToolbarPositionerProps) => Positioner<ToolbarPositionerRange>;
|