yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-11-02 03:29:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add RTL support in feed editor (#14052)

Browse Source 
* feat(ui): add RTL support in feed editor

* apply rtl on content only
This commit is contained in:
Sachin Chaurasiya 2023-11-22 14:47:46 +05:30 committed by GitHub
parent 9c990fef19
commit 5e6e1d4f3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/FeedEditor.tsx
View File

@ -34,7 +34,11 @@ import {
} from '../../constants/Feeds.constants';
import { HTMLToMarkdown, matcher } from '../../utils/FeedUtils';
import { LinkBlot } from '../../utils/QuillLink/QuillLink';
import { insertMention, insertRef } from '../../utils/QuillUtils';
import {
directionHandler,
insertMention,
insertRef,
} from '../../utils/QuillUtils';
import { getEntityIcon } from '../../utils/TableUtils';
import { editorRef } from '../common/RichTextEditor/RichTextEditor.interface';
import './feed-editor.less';
@ -77,6 +81,7 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
handlers: {
insertMention: insertMention,
insertRef: insertRef,
direction: directionHandler,
},
},
'emoji-toolbar': true,
@ -226,7 +231,10 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
}, [focused, editorRef]);
return (
<div className={className} data-testid="editor-wrapper">
<div
className={className}
data-testid="editor-wrapper"
id="om-quill-editor">
<ReactQuill
className={classNames('editor-container', editorClass)}
modules={modules}

15
openmetadata-ui/src/main/resources/ui/src/components/FeedEditor/feed-editor.less
View File

@ -1036,12 +1036,19 @@
text-decoration: none;
}
.ql-snow.ql-toolbar .ql-formats:nth-child(5) {
vertical-align: baseline;
}
.ql-snow.ql-toolbar .ql-formats button.ql-insertMention {
padding: 0px;
}
.ql-insertMention::after {
content: '@';
font-weight: bold;
font-size: 18px;
display: block;
margin-top: -4px;
}
.ql-insertRef::after {
content: '#';
@ -1095,3 +1102,9 @@ button.ql-emoji {
height: 24px;
width: 24px;
}
#om-quill-editor[data-dir='rtl'] {
.ql-editor.ql-blank::before {
text-align: right;
}
}

1
openmetadata-ui/src/main/resources/ui/src/constants/Feeds.constants.ts
View File

@ -45,6 +45,7 @@ export const TOOLBAR_ITEMS = [
[{ list: 'ordered' }, { list: 'bullet' }],
['link'],
['insertMention', 'insertRef', 'emoji'],
[{ direction: 'rtl' }],
];
export enum TaskOperation {

16
openmetadata-ui/src/main/resources/ui/src/utils/QuillUtils.js
View File

@ -21,3 +21,19 @@ export function insertRef() {
const ref = this.quill.getModule('mention');
ref.openMenu('#');
}
export function directionHandler(value) {
const { align } = this.quill.getFormat();
// get the editor container
const container = document.getElementById('om-quill-editor');
if (value === 'rtl' && align == null) {
container.setAttribute('data-dir', value);
this.quill.format('align', 'right', 'user');
} else if (!value && align === 'right') {
this.quill.format('align', false, 'user');
container.setAttribute('data-dir', 'ltr');
}
this.quill.format('direction', value, 'user');
}