Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix rte source mode #5083

Merged
merged 5 commits into from
Mar 25, 2024
Merged

Fix rte source mode #5083

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f83d73d
fix: configure tiptap schema for custom email templates
whoselen Mar 23, 2024
38c683e
fix: make editor section resizable
whoselen Mar 23, 2024
c8c5be5
fix update yarn.lock file
whoselen Mar 25, 2024
48b0068
fix: ignore prosemirror separator
whoselen Mar 25, 2024
8dd1fdb
fix add borders to table cell & header
whoselen Mar 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 23 additions & 24 deletions packages/erxes-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,29 @@
"@nateradebaugh/react-datetime": "4.0.0-rc.10",
"@types/styled-components": "^3.0.0",
"ckeditor4-react": "^1.0.0",
"@tiptap/starter-kit" : "^2.1.12",
"@tiptap/pm": "^2.1.12",
"@tiptap/react": "^2.1.12",
"@tiptap/extension-text-style": "^2.1.12",
"@tiptap/extension-text-align": "^2.1.12",
"@tiptap/extension-link": "^2.1.12",
"@tiptap/extension-image": "^2.1.12",
"@tiptap/extension-color": "^2.1.12",
"@tiptap/extension-font-family": "^2.1.12",
"@tiptap/extension-highlight": "^2.1.12",
"@tiptap/extension-mention": "^2.1.12",
"@tiptap/extension-placeholder": "^2.1.12",
"@tiptap/extension-subscript": "^2.1.12",
"@tiptap/extension-superscript": "^2.1.12",
"@tiptap/extension-underline": "^2.1.12",
"@tiptap/extension-heading" : "^2.1.12",
"@tiptap/extension-table": "^2.1.12",
"@tiptap/extension-table-row": "^2.1.12",
"@tiptap/extension-table-header": "^2.1.12",
"@tiptap/extension-table-cell": "^2.1.13",
"@tiptap/extension-character-count": "^2.1.13",
"@tiptap/extension-bubble-menu": "^2.1.13",
"@tiptap/suggestion": "^2.1.12",
"@tiptap/html": "^2.1.12",
"@tiptap/starter-kit": "^2.2.4",
"@tiptap/pm": "^2.2.4",
"@tiptap/react": "^2.2.4",
"@tiptap/extension-text-style": "^2.2.4",
"@tiptap/extension-font-family": "^2.2.4",
"@tiptap/extension-text-align": "^2.2.4",
"@tiptap/extension-link": "^2.2.4",
"@tiptap/extension-image": "^2.2.4",
"@tiptap/extension-color": "^2.2.4",
"@tiptap/extension-highlight": "^2.2.4",
"@tiptap/extension-mention": "^2.2.4",
"@tiptap/extension-placeholder": "^2.2.4",
"@tiptap/extension-subscript": "^2.2.4",
"@tiptap/extension-superscript": "^2.2.4",
"@tiptap/extension-underline": "^2.2.4",
"@tiptap/extension-table": "^2.2.4",
"@tiptap/extension-table-row": "^2.2.4",
"@tiptap/extension-table-header": "^2.2.4",
"@tiptap/extension-table-cell": "^2.2.4",
"@tiptap/extension-character-count": "^2.2.4",
"@tiptap/extension-bubble-menu": "^2.2.4",
"@tiptap/suggestion": "^2.2.4",
"@tiptap/html": "^2.2.4",
"@codemirror/lang-html": "^6.4.6",
"@uiw/react-codemirror": "^4.21.20",
"color": "3.1.2",
Expand Down
7 changes: 6 additions & 1 deletion ...es/erxes-ui/src/components/richTextEditor/RichTextEditorContent/RichTextEditorContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,12 @@ export const RichTextEditorContent = (props: IRichTextEditorContentProps) => {
}

return (
<ProseMirrorWrapper data-promise-mirror-editor={true}>
<ProseMirrorWrapper
data-promise-mirror-editor={true}
$height={autoGrow ? undefined : convertToPx(height)}
$minHeight={convertToPx(autoGrow ? autoGrowMinHeight : height)}
$maxHeight={convertToPx(autoGrow ? autoGrowMaxHeight : height)}
>
<CodeMirror
ref={codeMirrorRef}
style={{ outline: 'none' }}
Expand Down
37 changes: 37 additions & 0 deletions packages/erxes-ui/src/components/richTextEditor/extensions/GlobalAttributes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import { Extension } from '@tiptap/core';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (testing): Consider adding tests for GlobalAttributes extension.

It's important to ensure that the GlobalAttributes extension correctly parses and renders HTML attributes as expected. This could include testing various HTML elements with different attributes to verify that they are handled correctly.

export const GlobalAttributes = Extension.create({
addGlobalAttributes() {
return [
{
// Extend the following extensions
types: ['table'],
// … with those attributes
attributes: {
border: {
parseHTML: (element) => element.getAttribute('border'),
},

cellSpacing: {
parseHTML: (element) => element.getAttribute('cellspacing'),
},
cellPadding: {
parseHTML: (element) => element.getAttribute('cellpadding'),
},
width: {
default: null,
parseHTML: (element) => {
const width =
element.style.width || element.getAttribute('width') || null;
return width;
Comment on lines +23 to +25
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code-quality): Inline variable that is immediately returned (inline-immediately-returned-variable)

Suggested change
const width =
element.style.width || element.getAttribute('width') || null;
return width;
return element.style.width || element.getAttribute('width') || null;


ExplanationSomething that we often see in people's code is assigning to a result variable
and then immediately returning it.

Returning the result directly shortens the code and removes an unnecessary
variable, reducing the mental load of reading the function.

Where intermediate variables can be useful is if they then get used as a
parameter or a condition, and the name can act like a comment on what the
variable represents. In the case where you're returning it from a function, the
function name is there to tell you what the result is, so the variable name
is unnecessary.

},
renderHTML: (attributes) => {
return {
width: attributes.width,
};
},
},
},
},
];
},
});
29 changes: 16 additions & 13 deletions packages/erxes-ui/src/components/richTextEditor/extensions/Image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const enum ImageDisplay {
INLINE = 'inline',
BREAK_TEXT = 'block',
FLOAT_LEFT = 'left',
FLOAT_RIGHT = 'right'
FLOAT_RIGHT = 'right',
}

export interface IImageOptions {
Expand Down Expand Up @@ -34,37 +34,40 @@ export const ImageResize = Image.extend<IImageOptions>({
...this.parent?.(),
width: {
default: null,
parseHTML: element => {
parseHTML: (element) => {
const width =
element.style.width || element.getAttribute('width') || null;
return width;
},
renderHTML: attributes => {
renderHTML: (attributes) => {
return {
width: attributes.width
width: attributes.width,
};
}
},
},
height: {
default: null,
parseHTML: element => {
parseHTML: (element) => {
const height =
element.style.height || element.getAttribute('height') || null;
return height;
},
renderHTML: attributes => {
renderHTML: (attributes) => {
return {
height: attributes.height
height: attributes.height,
};
}
}
},
},
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (code_refinement): Ensure consistency in handling 'style' attribute across all extensions.

The addition of 'style' attribute handling in the Image extension is a good improvement. Ensure similar attributes are consistently handled across all relevant extensions for uniformity.

style: {
parseHTML: (element) => element.getAttribute('style'),
},
};
},
parseHTML() {
return [
{
tag: 'img[src]'
}
tag: 'img[src]',
},
];
}
},
});
12 changes: 12 additions & 0 deletions packages/erxes-ui/src/components/richTextEditor/extensions/Table/Cell/Cell.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import TiptapCell from '@tiptap/extension-table-cell';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (testing): Consider adding tests for Cell extension.

Testing the Cell extension is essential to verify that it correctly extends the default table cell behavior, especially regarding the parsing and rendering of style attributes.


export const Cell = TiptapCell.extend({
addAttributes() {
return {
...this.parent?.(),
style: {
parseHTML: (element) => element.getAttribute('style'),
},
};
},
});
1 change: 1 addition & 0 deletions packages/erxes-ui/src/components/richTextEditor/extensions/Table/Cell/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Cell } from './Cell';
11 changes: 11 additions & 0 deletions packages/erxes-ui/src/components/richTextEditor/extensions/Table/Header/Header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import TiptapHeader from '@tiptap/extension-table-header';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (testing): Consider adding tests for Header extension.

Testing the Header extension is important to confirm that it correctly extends the default table header behavior, with a focus on the parsing and rendering of style attributes.

export const Header = TiptapHeader.extend({
addAttributes() {
return {
...this.parent?.(),
style: {
parseHTML: (element) => element.getAttribute('style'),
},
};
},
});
1 change: 1 addition & 0 deletions packages/erxes-ui/src/components/richTextEditor/extensions/Table/Header/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Header } from './Header';
12 changes: 12 additions & 0 deletions packages/erxes-ui/src/components/richTextEditor/extensions/Table/Row/Row.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import TiptapRow from '@tiptap/extension-table-row';
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (testing): Consider adding tests for Row extension.

It's crucial to ensure that the Row extension behaves as expected, particularly in terms of handling style attributes. Tests could focus on verifying the correct parsing and rendering of these attributes.


export const Row = TiptapRow.extend({
addAttributes() {
return {
...this.parent?.(),
style: {
parseHTML: (element) => element.getAttribute('style'),
},
};
},
});
1 change: 1 addition & 0 deletions packages/erxes-ui/src/components/richTextEditor/extensions/Table/Row/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { Row } from './Row';
3 changes: 3 additions & 0 deletions ...chTextEditor/extensions/TableImproved.tsx → ...Editor/extensions/Table/TableImproved.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ export const TableImproved = Table.extend({
};
},
},
style: {
parseHTML: (element) => element.getAttribute('style'),
},
};
},
parseHTML() {
Expand Down
4 changes: 4 additions & 0 deletions packages/erxes-ui/src/components/richTextEditor/extensions/Table/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export { TableImproved } from './TableImproved';
export { Cell } from './Cell';
export { Row } from './Row';
export { Header } from './Header';
3 changes: 2 additions & 1 deletion packages/erxes-ui/src/components/richTextEditor/extensions/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,5 +2,6 @@ export { Link } from './Link';
export { FontSize } from './FontSize';
export { ImageResize } from './Image';
export { MentionExtended } from './Mention';
export { TableImproved } from './TableImproved';
export { TableImproved, Cell, Row, Header } from './Table';
export { Variable } from './variable';
export { GlobalAttributes } from './GlobalAttributes';
Loading
Loading