Skip to content

Commit

Permalink
Merge branch 'development' into task/wr-426-display-new-comment-notif…
Browse files Browse the repository at this point in the history
…ication-on-all-pages
  • Loading branch information
canterbery committed Sep 29, 2023
2 parents 3451f27 + 6883073 commit b7d181a
Show file tree
Hide file tree
Showing 29 changed files with 402 additions and 102 deletions.
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
export { FontSize } from './font-size/font-size.extension.js';
export { Indent } from './indent/indent.extension.js';
export { Upperline } from './upperline/upperline.extension.js';
export { Placeholder } from '@tiptap/extension-placeholder';
export { TextAlign } from '@tiptap/extension-text-align';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
import { Extension } from '@tiptap/core';

import { type ExtensionName } from '../libs/enums/extension-name.enum.js';
import {
DEFAULT_INDENT_LEVEL,
DEFAULT_OPTIONS_TYPES,
INDENT_LEVELS,
} from './libs/constants/constants.js';
import { IndentProperty } from './libs/enums/enums.js';
import { updateIndentLevel } from './libs/helpers/helpers.js';
import {
type IndentOptions,
type IndentParseHTML,
type IndentRenderHTML,
type NodeAttributesIndent,
} from './libs/types/types.js';

declare module '@tiptap/core' {
interface Commands<ReturnType> {
[ExtensionName.INDENT]: {
indent: () => ReturnType;
outdent: () => ReturnType;
};
}
}

const Indent = Extension.create<IndentOptions>({
name: 'indent',

defaultOptions: {
types: DEFAULT_OPTIONS_TYPES,
indentLevels: [...INDENT_LEVELS],
defaultIndentLevel: DEFAULT_INDENT_LEVEL,
},

addGlobalAttributes() {
return [
{
types: this.options.types,
attributes: {
indent: {
default: this.options.defaultIndentLevel,
renderHTML: (attributes): IndentRenderHTML => {
const attributesIndent =
attributes.indent as NodeAttributesIndent;
const indent =
typeof attributesIndent === 'object'
? attributesIndent.indent
: attributesIndent;

return {
style: `text-indent: ${indent}px;`,
};
},
parseHTML: (element): IndentParseHTML => {
return {
indent:
Number.parseInt(element.style.textIndent) ||
this.options.defaultIndentLevel,
};
},
},
},
},
];
},

addCommands() {
return {
indent: () => {
return ({ tr: transaction, state, dispatch, editor }): boolean => {
const { selection } = state;
transaction = transaction.setSelection(selection);
transaction = updateIndentLevel(
transaction,
IndentProperty.MORE,
editor.extensionManager.extensions,
);

if (transaction.docChanged) {
dispatch && dispatch(transaction);
return true;
}

return false;
};
},

outdent: () => {
return ({ tr: transaction, state, dispatch, editor }): boolean => {
const { selection } = state;
if (!selection.$anchor.parentOffset) {
transaction = transaction.setSelection(selection);
}
transaction = updateIndentLevel(
transaction,
IndentProperty.LESS,
editor.extensionManager.extensions,
);

if (transaction.docChanged) {
dispatch && dispatch(transaction);
return true;
}

return false;
};
},
};
},

addKeyboardShortcuts() {
return {
Tab: (): boolean => this.editor.commands.indent(),
'Shift-Tab': (): boolean => this.editor.commands.outdent(),
Backspace: (): boolean => {
if (this.editor.state.selection.$anchor.parentOffset) {
return false;
}
return this.editor.commands.outdent();
},
};
},
});

export { Indent };
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { DEFAULT_INDENT_LEVEL } from './default-indent-level.constant.js';
export { DEFAULT_OPTIONS_TYPES } from './default-options-types.constant.js';
export { INDENT_LEVELS } from './indent-levels.constant.js';
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const DEFAULT_INDENT_LEVEL = 0;

export { DEFAULT_INDENT_LEVEL };
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const DEFAULT_OPTIONS_TYPES = ['heading', 'paragraph'];

export { DEFAULT_OPTIONS_TYPES };
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const INDENT_LEVELS = [
0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300,
] as const;

export { INDENT_LEVELS };
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { IndentProperty } from './indent-properties.enum.js';
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const IndentProperty = {
MIN: 0,
MAX: 300,

MORE: 30,
LESS: -30,
} as const;

export { IndentProperty };
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { setNodeIndentMarkup } from './set-node-indent-markup.helper.js';
export { updateIndentLevel } from './update-indent-level.helper.js';
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { type Transaction } from 'prosemirror-state';

import { DEFAULT_INDENT_LEVEL } from '../constants/default-indent-level.constant.js';
import { IndentProperty } from '../enums/enums.js';
import { type NodeAttributesIndent } from '../types/types.js';

const setNodeIndentMarkup = (
transaction: Transaction,
position: number,
delta: number,
): Transaction => {
if (!transaction.doc) {
return transaction;
}

const node = transaction.doc.nodeAt(position);
if (!node) {
return transaction;
}

const nodeAttributesIndent = node.attrs.indent as NodeAttributesIndent;

const nodeIndent =
typeof nodeAttributesIndent === 'object'
? nodeAttributesIndent.indent
: nodeAttributesIndent;

const newIndent = (nodeIndent || DEFAULT_INDENT_LEVEL) + delta;
const indent = Math.min(
Math.max(newIndent, IndentProperty.MIN),
IndentProperty.MAX,
);

if (indent === node.attrs.indent) {
return transaction;
}

const nodeAttributes = {
...node.attrs,
indent,
};

return transaction.setNodeMarkup(
position,
node.type,
nodeAttributes,
node.marks,
);
};

export { setNodeIndentMarkup };
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
import { type Extensions, isList } from '@tiptap/core';
import { type Transaction } from 'prosemirror-state';
import { AllSelection, TextSelection } from 'prosemirror-state';

import { DEFAULT_OPTIONS_TYPES } from '../constants/constants.js';
import { setNodeIndentMarkup } from './set-node-indent-markup.helper.js';

const updateIndentLevel = (
transaction: Transaction,
delta: number,
extensions: Extensions,
): Transaction => {
const { doc, selection } = transaction;

if (!doc || !selection) {
return transaction;
}

if (
!(selection instanceof TextSelection || selection instanceof AllSelection)
) {
return transaction;
}

const { from, to } = selection;

doc.nodesBetween(from, to, (node, position) => {
if (DEFAULT_OPTIONS_TYPES.includes(node.type.name)) {
transaction = setNodeIndentMarkup(transaction, position, delta);
return false;
}

return !isList(node.type.name, extensions);
});

return transaction;
};

export { updateIndentLevel };
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
type IndentOptions = {
types: string[];
indentLevels: number[];
defaultIndentLevel: number;
};

export { type IndentOptions };
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
type IndentParseHTML = { indent: number } | null | undefined;

export { type IndentParseHTML };
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
type IndentRenderHTML = { style: string } | null | undefined;

export { type IndentRenderHTML };
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
type NodeAttributesIndent =
| number
| {
indent: number;
};

export { type NodeAttributesIndent };
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export { type IndentOptions } from './indent-options.type.js';
export { type IndentParseHTML } from './indent-parse-html.type.js';
export { type IndentRenderHTML } from './indent-render-html.type.js';
export { type NodeAttributesIndent } from './node-attributes-indent.type.js';
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
const ExtensionName = {
FONT_SIZE: 'fontSize',
UPPERLINE: 'upperline',
INDENT: 'indent',
} as const;

export { ExtensionName };
2 changes: 2 additions & 0 deletions frontend/src/libs/components/text-editor/text-editor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Toolbar } from './libs/components/components.js';
import { TEXT_EDITOR_PLACEHOLDER_TEXT } from './libs/constants/constants.js';
import {
FontSize,
Indent,
Placeholder,
StarterKit,
TextAlign,
Expand Down Expand Up @@ -67,6 +68,7 @@ const TextEditor = <T extends FieldValues>({
Upperline,
StarterKit,
TextStyle,
Indent,
FontSize.configure({
baseFontSize: getWrapperFontSize(wrapperReference.current),
}),
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
gap: 20px;
height: 100%;
padding: 20px;
text-align: center;
}

.emptyArticlesIcon {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@
color: var(--black-90);
}

.modalTitle {
color: var(--white);
}

.modal {
overflow: hidden;
box-shadow: 0 0 6px var(--translucent-dark-blue-gray);
Expand Down Expand Up @@ -97,12 +101,16 @@
minmax(75px, 1fr)
);
gap: 10px;
padding: 5px;
padding: 10px 5px 5px;
font-size: 10px;
}

.achievementBadgeModal {
width: 75px;
height: 75px;
}

.modalTitle {
font-size: 18px;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ const UserAchievements: React.FC<Properties> = ({ className }) => {
closeBtnClassName={styles.modalCloseBtn}
>
<div>
<h2 className={styles.title}>Achievements</h2>
<h2 className={styles.modalTitle}>Achievements</h2>
<AchievementList
hasToShowTooltip={true}
achievements={achievementsList}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,6 @@
}

@media only screen and (max-width: breakpoints.$large) {
.wrapper {
align-items: flex-start;
}

.title {
display: none;
}
Expand Down
Loading

0 comments on commit b7d181a

Please sign in to comment.