Alignment for blocks

packages/core/editor/src/components/Block/Block.tsx

@@ -1,6 +1,6 @@
 import { useYooptaEditor } from '../../contexts/YooptaContext/YooptaContext';
 import { useSortable } from '@dnd-kit/sortable';
-import { useState } from 'react';
+import { CSSProperties, useState } from 'react';
 import { BlockActions } from './BlockActions';
 
 const Block = ({ children, block, blockId }) => {
@@ -10,12 +10,15 @@ const Block = ({ children, block, blockId }) => {
   const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isOver, isDragging } =
     useSortable({ id: blockId, disabled: editor.readOnly });
 
-  const style = {
+  const align = block.meta.align || 'left';
+  const className = `yoopta-block yoopta-align-${align}`;
+
+  const style: CSSProperties = {
+    // [TODO] = handle max depth
+    marginLeft: `${block.meta.depth * 20}px`,
     transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : 'none',
     transition,
     opacity: isDragging ? 0.7 : 1,
-    // [TODO] = handle max depth
-    marginLeft: `${block.meta.depth * 20}px`,
   };
 
   const isSelected = editor.selectedBlocks?.includes(block.meta.order);
@@ -37,7 +40,7 @@ const Block = ({ children, block, blockId }) => {
   return (
     <div
       ref={setNodeRef}
-      className="yoopta-block"
+      className={className}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       style={style}

packages/core/editor/src/components/Editor/Editor.tsx

@@ -124,26 +124,26 @@ const Editor = ({
   const onMouseDown = (event: React.MouseEvent) => {
     if (isReadOnly) return;
 
-    if (event.shiftKey) {
-      const currentSelectionIndex = editor.selection;
-      if (!currentSelectionIndex) return;
-
-      const targetBlock = (event.target as HTMLElement).closest('div[data-yoopta-block]');
-      const targetBlockId = targetBlock?.getAttribute('data-yoopta-block-id') || '';
-      const targetBlockIndex = editor.children[targetBlockId]?.meta.order;
-      if (typeof targetBlockIndex !== 'number') return;
-
-      const indexesBetween = Array.from({ length: Math.abs(targetBlockIndex - currentSelectionIndex[0]) }).map(
-        (_, index) =>
-          targetBlockIndex > currentSelectionIndex[0]
-            ? currentSelectionIndex[0] + index + 1
-            : currentSelectionIndex[0] - index - 1,
-      );
-
-      editor.blur();
-      editor.setBlockSelected([currentSelectionIndex[0], ...indexesBetween], { only: true });
-      return;
-    }
+    // if (event.shiftKey) {
+    //   const currentSelectionIndex = editor.selection;
+    //   if (!currentSelectionIndex) return;
+
+    //   const targetBlock = (event.target as HTMLElement).closest('div[data-yoopta-block]');
+    //   const targetBlockId = targetBlock?.getAttribute('data-yoopta-block-id') || '';
+    //   const targetBlockIndex = editor.children[targetBlockId]?.meta.order;
+    //   if (typeof targetBlockIndex !== 'number') return;
+
+    //   const indexesBetween = Array.from({ length: Math.abs(targetBlockIndex - currentSelectionIndex[0]) }).map(
+    //     (_, index) =>
+    //       targetBlockIndex > currentSelectionIndex[0]
+    //         ? currentSelectionIndex[0] + index + 1
+    //         : currentSelectionIndex[0] - index - 1,
+    //   );
+
+    //   editor.blur();
+    //   editor.setBlockSelected([currentSelectionIndex[0], ...indexesBetween], { only: true });
+    //   return;
+    // }
 
     resetSelectionState();
     handleEmptyZoneClick(event);

packages/core/editor/src/editor/blocks/createBlock.ts

@@ -38,6 +38,7 @@ export function createBlock(editor: YooEditor, type: string, options?: CreateBlo
     meta: {
       order: block.meta.order,
       depth: block.meta.depth,
+      align: block.meta.align,
     },
     value: [elements],
   });

packages/core/editor/src/editor/blocks/splitBlock.ts

@@ -40,6 +40,7 @@ export function splitBlock(editor: YooEditor, options: YooptaEditorTransformOpti
       meta: {
         order: currentBlock.meta.order + 1,
         depth: currentBlock.meta.depth,
+        align: currentBlock.meta.align,
       },
       // [TODO] - check for mark text formats
       value: [nextBlockChildren],

packages/core/editor/src/editor/types.ts

@@ -23,6 +23,7 @@ export type YooptaBlockData<T = Descendant | SlateElement> = {
 export type YooptaBlockBaseMeta = {
   order: number;
   depth: number;
+  align?: 'left' | 'center' | 'right' | undefined;
 };
 
 export type YooptaContentValue = Record<string, YooptaBlockData>;

packages/core/editor/src/plugins/SlateEditorComponent.tsx

@@ -125,6 +125,7 @@ const SlateEditorComponent = <TKeys extends string, TProps, TOptions>({
       }
 
       if (!ElementComponent) return <DefaultElement {...props} attributes={attributes} />;
+
       return (
         <ElementComponent
           {...props}

packages/core/editor/src/plugins/types.ts

@@ -19,7 +19,6 @@ export type PluginOptions<T> = {
     icon?: string | ReactNode | ReactElement;
   };
   shortcuts?: string[];
-  align?: 'left' | 'center' | 'right';
   HTMLAttributes?: HTMLAttributes<HTMLElement>;
 } & T;
 

packages/core/editor/src/styles.css

@@ -129,4 +129,17 @@ pre {
 
 .yoopta-block-options-group {
   @apply yoo-editor-flex yoo-editor-flex-col
+}
+
+/* Aligment for elements */
+.yoopta-align-left {
+  @apply yoo-editor-justify-start yoo-editor-text-left
+}
+
+.yoopta-align-center {
+  @apply yoo-editor-justify-center yoo-editor-text-center
+}
+
+.yoopta-align-right {
+  @apply yoo-editor-justify-end yoo-editor-text-right
 }

packages/core/editor/src/utils/editorBuilders.ts

@@ -50,7 +50,7 @@ export function buildBlocks(editor, plugins: Plugin<string, PluginElement<unknow
       });
 
       // Omit fetchers and other non-block related options
-      const { display, placeholder, align, shortcuts } = plugin.options || {};
+      const { display, placeholder, shortcuts } = plugin.options || {};
 
       blocks[plugin.type] = {
         type: plugin.type,
@@ -59,7 +59,6 @@ export function buildBlocks(editor, plugins: Plugin<string, PluginElement<unknow
         options: {
           display,
           placeholder,
-          align,
           shortcuts,
         },
         isActive: () => {