Merge pull request #447 from BinaryStudioAcademy/development

development to production

frontend/src/assets/css/breakpoints.scss

@@ -1,6 +1,7 @@
 $extra-small: 480px;
 $small: 576px;
 $medium: 768px;
-$large: 992px;
-$extra-large: 1200px;
+$extra-medium: 992px;
+$large: 1200px;
+$extra-large: 1440px;
 $extra-extra-large: 1920px;

frontend/src/assets/css/variables.scss

@@ -59,6 +59,7 @@
 
   /* layout */
   --layout-width: 1680px;
+  --layout-side-padding: 60px;
 }
 
 input,
@@ -69,14 +70,28 @@ textarea {
   --input-placeholder-color: rgb(157 164 174 / 40%);
 }
 
+@media only screen and (max-width: breakpoints.$extra-large) {
+  :root {
+    --layout-side-padding: 40px;
+  }
+}
+
 @media only screen and (max-width: breakpoints.$medium) {
   :root {
     --header-height: 80px;
+    --layout-side-padding: 30px;
   }
 }
 
 @media only screen and (max-width: breakpoints.$small) {
   :root {
     --header-height: 55px;
+    --layout-side-padding: 20px;
+  }
+}
+
+@media only screen and (max-width: breakpoints.$extra-small) {
+  :root {
+    --layout-side-padding: 15px;
   }
 }

frontend/src/libs/components/header/styles.module.scss

@@ -10,7 +10,7 @@
   border-bottom: 2px solid var(--light-gray-15);
 }
 
-.layout {
+.header > .layout {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -113,6 +113,12 @@ img.avatar:hover {
   }
 }
 
+@media only screen and (max-width: breakpoints.$medium) {
+  .header > .layout {
+    padding: 15px 30px;
+  }
+}
+
 @media only screen and (max-width: breakpoints.$small) {
   .logo {
     width: 150px;

frontend/src/libs/components/layout/styles.module.scss

@@ -3,17 +3,11 @@
 .layout {
   max-width: var(--layout-width);
   margin: 0 auto;
-  padding: 30px 60px;
-}
-
-@media only screen and (max-width: breakpoints.$medium) {
-  .layout {
-    padding: 30px;
-  }
+  padding: 30px var(--layout-side-padding);
 }
 
 @media only screen and (max-width: breakpoints.$small) {
   .layout {
-    padding: 10px 30px 30px;
+    padding-top: 10px;
   }
 }

frontend/src/libs/components/modal/styles.module.scss

@@ -37,19 +37,19 @@
   }
 }
 
-@media only screen and (min-width: breakpoints.$medium) and (max-width: breakpoints.$large) {
+@media only screen and (min-width: breakpoints.$medium) and (max-width: breakpoints.$extra-medium) {
   .content {
     width: 88%;
   }
 }
 
-@media only screen and (min-width: breakpoints.$large) and (max-width: breakpoints.$extra-large) {
+@media only screen and (min-width: breakpoints.$extra-medium) and (max-width: breakpoints.$large) {
   .content {
     width: 850px;
   }
 }
 
-@media only screen and (min-width: breakpoints.$extra-large) and (max-width: breakpoints.$extra-extra-large) {
+@media only screen and (min-width: breakpoints.$large) and (max-width: breakpoints.$extra-extra-large) {
   .content {
     width: 900px;
   }

frontend/src/libs/components/prompt-generation/styles.module.scss

@@ -77,7 +77,7 @@
   }
 }
 
-@media only screen and (max-width: breakpoints.$extra-large) {
+@media only screen and (max-width: breakpoints.$large) {
   .promptsContainer {
     display: none;
   }

frontend/src/libs/components/text-editor/libs/extensions/extensions.ts

@@ -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';

frontend/src/libs/components/text-editor/libs/extensions/indent/indent.extension.ts

@@ -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 };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/constants/constants.ts

@@ -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';

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/constants/default-indent-level.constant.ts

@@ -0,0 +1,3 @@
+const DEFAULT_INDENT_LEVEL = 0;
+
+export { DEFAULT_INDENT_LEVEL };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/constants/default-options-types.constant.ts

@@ -0,0 +1,3 @@
+const DEFAULT_OPTIONS_TYPES = ['heading', 'paragraph'];
+
+export { DEFAULT_OPTIONS_TYPES };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/constants/indent-levels.constant.ts

@@ -0,0 +1,5 @@
+const INDENT_LEVELS = [
+  0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300,
+] as const;
+
+export { INDENT_LEVELS };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/enums/enums.ts

@@ -0,0 +1 @@
+export { IndentProperty } from './indent-properties.enum.js';

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/enums/indent-properties.enum.ts

@@ -0,0 +1,9 @@
+const IndentProperty = {
+  MIN: 0,
+  MAX: 300,
+
+  MORE: 30,
+  LESS: -30,
+} as const;
+
+export { IndentProperty };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/helpers/helpers.ts

@@ -0,0 +1,2 @@
+export { setNodeIndentMarkup } from './set-node-indent-markup.helper.js';
+export { updateIndentLevel } from './update-indent-level.helper.js';

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/helpers/set-node-indent-markup.helper.ts

@@ -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 };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/helpers/update-indent-level.helper.ts

@@ -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 };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/types/indent-options.type.ts

@@ -0,0 +1,7 @@
+type IndentOptions = {
+  types: string[];
+  indentLevels: number[];
+  defaultIndentLevel: number;
+};
+
+export { type IndentOptions };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/types/indent-parse-html.type.ts

@@ -0,0 +1,3 @@
+type IndentParseHTML = { indent: number } | null | undefined;
+
+export { type IndentParseHTML };

frontend/src/libs/components/text-editor/libs/extensions/indent/libs/types/indent-render-html.type.ts

@@ -0,0 +1,3 @@
+type IndentRenderHTML = { style: string } | null | undefined;
+
+export { type IndentRenderHTML };