Merge pull request #5677 from habibayman/feat/RTE-text-align

feat(texteditor): add text alignment toggling buttons

Author: nucleogenesis

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditor.vue

@@ -410,6 +410,7 @@
   }
 
   .editor-container small {
+    display: block;
     margin: 4px 0;
     font-size: 12px;
   }

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/TipTapEditorStrings.js

@@ -103,6 +103,16 @@ const MESSAGES = {
     context: 'Option to set text format to header 3',
   },
 
+  // Text alignments
+  alignLeft: {
+    message: 'Align left',
+    context: 'Button to align text to the left',
+  },
+  alignRight: {
+    message: 'Align right',
+    context: 'Button to align text to the right',
+  },
+
   // Accessibility labels
   textFormattingToolbar: {
     message: 'Text formatting toolbar',

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/EditorToolbar.vue

@@ -68,6 +68,20 @@
 
     <ToolbarDivider v-if="visibleCategories.includes('clipboard')" />
 
+    <!-- Text Alignment -->
+    <ToolbarButton
+      v-if="visibleCategories.includes('align')"
+      :title="alignAction.title"
+      :icon="alignAction.icon"
+      :is-active="alignAction.isActive"
+      :is-available="alignAction.isAvailable"
+      @click="alignAction.handler"
+    />
+
+    <ToolbarDivider v-if="visibleCategories.includes('align')" />
+
+    <!-- Clear Formatting -->
+
     <ToolbarButton
       v-if="visibleCategories.includes('clearFormat')"
       :title="clearFormatting$()"
@@ -221,6 +235,25 @@
           </button>
         </template>
 
+        <!-- Overflow Text Alignment -->
+        <template v-if="overflowCategories.includes('align')">
+          <button
+            class="dropdown-item"
+            :class="{ active: alignAction.isActive }"
+            role="menuitem"
+            :disabled="!alignAction.isAvailable"
+            @click="alignAction.handler"
+          >
+            <img
+              :src="alignAction.icon"
+              class="dropdown-item-icon"
+              alt=""
+              aria-hidden="true"
+            >
+            <span class="dropdown-item-text">{{ alignAction.title }}</span>
+          </button>
+        </template>
+
         <!-- Overflow Clear Format -->
         <template v-if="overflowCategories.includes('clearFormat')">
           <button
@@ -345,6 +378,7 @@
         script: 710,
         lists: 650,
         clearFormat: 560,
+        align: 530,
         clipboard: 500,
         textFormat: 400,
       };
@@ -355,6 +389,7 @@
         'script',
         'lists',
         'clearFormat',
+        'align',
         'clipboard',
         'textFormat',
       ];
@@ -365,6 +400,7 @@
         canClearFormat,
         historyActions,
         textActions,
+        alignAction,
         listActions,
         scriptActions,
         insertTools,
@@ -523,6 +559,7 @@
         canClearFormat,
         historyActions,
         textActions,
+        alignAction,
         listActions,
         scriptActions,
         insertTools,

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/image/ImageNodeView.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <NodeViewWrapper class="image-node-wrapper">
+  <NodeViewWrapper :style="wrapperStyle">
     <div
       ref="containerRef"
       class="image-node-view"
@@ -88,6 +88,21 @@
       const compactThreshold = 200;
       let resizeListeners = null;
 
+      // Compute wrapper style based on textAlign attribute
+      const wrapperStyle = computed(() => {
+        const align = props.node.attrs.textAlign || 'left';
+        const alignmentMap = {
+          left: 'flex-start',
+          center: 'center',
+          right: 'flex-end',
+          justify: 'flex-start',
+        };
+        return {
+          display: 'flex',
+          justifyContent: alignmentMap[align] || 'flex-start',
+        };
+      });
+
       // Create debounced version of saveSize function
       const debouncedSaveSize = debounce(() => {
         props.updateAttributes({
@@ -296,6 +311,7 @@
         containerRef,
         resizeHandleRef,
         styleWidth,
+        wrapperStyle,
         onResizeStart,
         removeImage,
         editImage,

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/components/toolbar/MobileFormattingBar.vue

@@ -82,6 +82,13 @@
         @click="action.handler"
       />
       <ToolbarDivider />
+      <ToolbarButton
+        :title="alignAction.title"
+        :icon="alignAction.icon"
+        :is-active="alignAction.isActive"
+        @click="alignAction.handler"
+      />
+      <ToolbarDivider />
       <ToolbarButton
         v-for="action in scriptActions"
         :key="action.name"
@@ -131,7 +138,8 @@
         textFormattingToolbar$,
       } = getTipTapEditorStrings();
 
-      const { textActions, listActions, scriptActions, insertTools } = useToolbarActions(emit);
+      const { textActions, listActions, scriptActions, insertTools, alignAction } =
+        useToolbarActions(emit);
 
       const { canIncreaseFormat, canDecreaseFormat, increaseFormat, decreaseFormat } =
         useFormatControls();
@@ -200,6 +208,7 @@
         listActions,
         scriptActions,
         insertTools,
+        alignAction,
         toggleToolbar,
         canIncreaseFormat,
         canDecreaseFormat,

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useEditor.js

@@ -3,6 +3,7 @@ import { Editor } from '@tiptap/vue-2';
 import StarterKitExtension from '@tiptap/starter-kit';
 import { Superscript } from '@tiptap/extension-superscript';
 import { Subscript } from '@tiptap/extension-subscript';
+import { TextAlign } from '@tiptap/extension-text-align';
 import { Small } from '../extensions/SmallTextExtension';
 import { Image } from '../extensions/Image';
 import { CodeBlockSyntaxHighlight } from '../extensions/CodeBlockSyntaxHighlight';
@@ -31,6 +32,9 @@ export function useEditor() {
         Image,
         CustomLink, // Use our custom Link extension
         Math,
+        TextAlign.configure({
+          types: ['heading', 'paragraph', 'image', 'small'],
+        }),
       ],
       content: content || '<p></p>',
       editorProps: {

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/composables/useToolbarActions.js

@@ -5,6 +5,23 @@ import { sanitizePastedHTML } from '../utils/markdown';
 export function useToolbarActions(emit) {
   const editor = inject('editor', null);
 
+  // helper
+  const getEffectiveAlignment = editorInstance => {
+    if (!editorInstance) return 'left';
+
+    const isLeftAligned = editorInstance.isActive({ textAlign: 'left' });
+    const isRightAligned = editorInstance.isActive({ textAlign: 'right' });
+
+    if (isLeftAligned) return 'left';
+    if (isRightAligned) return 'right';
+
+    const { from } = editorInstance.state.selection;
+    const dom = editorInstance.view.domAtPos(from).node;
+    const el = dom.nodeType === 1 ? dom : dom.parentElement;
+
+    return el ? window.getComputedStyle(el).textAlign : 'left';
+  };
+
   const {
     undo$,
     redo$,
@@ -21,6 +38,8 @@ export function useToolbarActions(emit) {
     mathFormula$,
     codeBlock$,
     clipboardAccessFailed$,
+    alignLeft$,
+    alignRight$,
   } = getTipTapEditorStrings();
 
   // Action handlers
@@ -181,6 +200,18 @@ export function useToolbarActions(emit) {
     }
   };
 
+  const handleToggleAlign = () => {
+    if (!editor?.value) return;
+
+    const align = getEffectiveAlignment(editor.value);
+
+    editor.value
+      .chain()
+      .focus()
+      .setTextAlign(align === 'right' ? 'left' : 'right')
+      .run();
+  };
+
   const handleBulletList = () => {
     if (editor?.value) {
       editor.value.chain().focus().toggleBulletList().run();
@@ -418,6 +449,23 @@ export function useToolbarActions(emit) {
     handler: handleMinimize,
   };
 
+  const alignAction = computed(() => {
+    const editorInstance = editor?.value;
+    const effectiveAlign = getEffectiveAlignment(editorInstance);
+    const effectiveRight = effectiveAlign === 'right';
+
+    return {
+      name: 'toggleAlign',
+      title: effectiveRight ? alignLeft$() : alignRight$(),
+      icon: effectiveRight
+        ? require('../../assets/icon-alignLeft.svg')
+        : require('../../assets/icon-alignRight.svg'),
+      handler: handleToggleAlign,
+      isActive: false,
+      isAvailable: !isMarkActive('codeBlock'),
+    };
+  });
+
   return {
     // Individual handlers
     handleUndo,
@@ -429,6 +477,7 @@ export function useToolbarActions(emit) {
     handleCopy,
     handlePaste,
     handlePasteNoFormat,
+    handleToggleAlign,
     handleBulletList,
     handleNumberList,
     handleSubscript,
@@ -444,6 +493,7 @@ export function useToolbarActions(emit) {
     // Action arrays
     historyActions,
     textActions,
+    alignAction,
     listActions,
     scriptActions,
     insertTools,

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/extensions/Image.js

@@ -18,6 +18,19 @@ export const Image = Node.create({
       alt: { default: null },
       width: { default: null },
       height: { default: null },
+      textAlign: {
+        default: 'left',
+        parseHTML: element => {
+          const align = element.style.textAlign || element.getAttribute('data-text-align');
+          return align || 'left';
+        },
+        renderHTML: attributes => {
+          if (!attributes.textAlign || attributes.textAlign === 'left') {
+            return {};
+          }
+          return { 'data-text-align': attributes.textAlign };
+        },
+      },
     };
   },
 

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/extensions/SmallTextExtension.js

@@ -38,6 +38,14 @@ export const Small = Node.create({
       class: {
         default: 'small-text',
       },
+      textAlign: {
+        default: 'left',
+        parseHTML: element => element.style.textAlign || 'left',
+        renderHTML: attributes => {
+          if (!attributes.textAlign || attributes.textAlign === 'left') return {};
+          return { style: `text-align: ${attributes.textAlign}` };
+        },
+      },
     };
   },
 

contentcuration/contentcuration/frontend/shared/views/TipTapEditor/TipTapEditor/utils/markdown.js

@@ -5,15 +5,16 @@ import { storageUrl } from '../../../../vuex/file/utils';
 
 // --- Image Translation ---
 export const IMAGE_PLACEHOLDER = '${☣ CONTENTSTORAGE}';
-export const IMAGE_REGEX = /!\[([^\]]*)\]\(([^/]+\/[^\s=)]+)(?:\s*=\s*([0-9.]+)x([0-9.]+))?\)/g;
+export const IMAGE_REGEX =
+  /!\[([^\]]*)\]\(([^/]+\/[^\s=)]+)(?:\s*=\s*([0-9.]+)x([0-9.]+))?(?:\s+align=(\w+))?\)/g;
 
 export const imageMdToParams = markdown => {
   // Reset regex state before executing to ensure it works on all matches
   IMAGE_REGEX.lastIndex = 0;
   const match = IMAGE_REGEX.exec(markdown);
   if (!match) return null;
 
-  const [, alt, fullPath, width, height] = match;
+  const [, alt, fullPath, width, height, align] = match;
 
   // Extract just the filename from the full path
   const checksumWithExt = fullPath.split('/').pop();
@@ -24,17 +25,18 @@ export const imageMdToParams = markdown => {
   const checksum = parts.join('.');
 
   // Return the data with the correct property names that the rest of the system expects.
-  return { checksum, extension, alt: alt || '', width, height };
+  return { checksum, extension, alt: alt || '', width, height, align };
 };
 
-export const paramsToImageMd = ({ src, alt, width, height, permanentSrc }) => {
+export const paramsToImageMd = ({ src, alt, width, height, permanentSrc, textAlign }) => {
   const sourceToSave = permanentSrc || src;
 
   const fileName = sourceToSave.split('/').pop();
+  const alignSuffix = textAlign && textAlign !== 'left' ? ` align=${textAlign.trim()}` : '';
   if (Number.isFinite(+width) && Number.isFinite(+height)) {
-    return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName} =${width}x${height})`;
+    return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName} =${width}x${height}${alignSuffix})`;
   }
-  return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName})`;
+  return `![${alt || ''}](${IMAGE_PLACEHOLDER}/${fileName}${alignSuffix})`;
 };
 
 // --- Math/Formula Translation ---
@@ -134,12 +136,13 @@ export function preprocessMarkdown(markdown) {
     // 2. The permanentSrc is just the checksum + extension.
     const permanentSrc = `${params.checksum}.${params.extension}`;
 
-    // 3. Create attributes string for width and height only if they exist
+    // 3. Create attributes string for width, height, and alignment only if they exist
     const widthAttr = params.width ? ` width="${params.width}"` : '';
     const heightAttr = params.height ? ` height="${params.height}"` : '';
+    const alignAttr = params.align ? ` style="text-align: ${params.align}"` : '';
 
     // 4. Create an <img> tag with the REAL display URL in `src`.
-    return `<img src="${displayUrl}" permanentSrc="${permanentSrc}" alt="${params.alt}"${widthAttr}${heightAttr} />`;
+    return `<img src="${displayUrl}" permanentSrc="${permanentSrc}" alt="${params.alt}"${widthAttr}${heightAttr}${alignAttr} />`;
   });
 
   processedMarkdown = processedMarkdown.replace(MATH_REGEX, match => {