fix: BiDi/RTL support

webapp/src/components/cardDetail/cardDetail.tsx

@@ -232,6 +232,7 @@ const CardDetail = (props: Props): JSX.Element|null => {
                     onCancel={() => setTitle(props.card.title)}
                     readonly={props.readonly || !canEditBoardCards || limited}
                     spellCheck={true}
+                    dir='auto'
                 />
 
                 {/* Hidden (limited) card copy + CTA */}

webapp/src/components/kanban/kanban.scss

@@ -55,6 +55,7 @@
             .Editable {
                 color: rgba(var(--center-channel-color-rgb), 1);
                 background: transparent;
+                text-align: left;
             }
         }
 

webapp/src/components/kanban/kanbanCard.tsx

@@ -139,6 +139,7 @@ const KanbanCard = (props: Props) => {
                     <div
                         key='__title'
                         className='octo-titletext'
+                        dir='auto'
                     >
                         {card.title || intl.formatMessage({id: 'KanbanCard.untitled', defaultMessage: 'Untitled'})}
                     </div>

webapp/src/components/markdownEditor.tsx

@@ -22,6 +22,7 @@ type Props = {
     onEditorCancel?: () => void
     autofocus?: boolean
     saveOnEnter?: boolean
+    dir?: string
 }
 
 const MarkdownEditor = (props: Props): JSX.Element => {
@@ -46,6 +47,7 @@ const MarkdownEditor = (props: Props): JSX.Element => {
                     setIsEditing(true)
                 }
             }}
+            dir='auto'
         />
     )
 
@@ -70,7 +72,7 @@ const MarkdownEditor = (props: Props): JSX.Element => {
     )
 
     const element = (
-        <div className={`MarkdownEditor octo-editor ${props.className || ''} ${isEditing ? 'active' : ''}`}>
+        <div className={`MarkdownEditor octo-editor ${props.className || ''} ${isEditing ? 'active' : ''}`} dir='auto'>
             {isEditing ? editorElement : previewElement}
         </div>
     )

webapp/src/components/sidebar/sidebarBoardItem.tsx

@@ -229,6 +229,7 @@ const SidebarBoardItem = (props: Props) => {
                         <div
                             className='octo-sidebar-title'
                             title={title}
+                            dir='auto'
                         >
                             {title}
                         </div>
@@ -315,6 +316,7 @@ const SidebarBoardItem = (props: Props) => {
                             <div
                                 className='octo-sidebar-title'
                                 title={view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}
+                                dir='auto'
                             >
                                 {view.title || intl.formatMessage({id: 'Sidebar.untitled-view', defaultMessage: '(Untitled View)'})}
                             </div>

webapp/src/components/sidebar/sidebarCategory.tsx

@@ -300,6 +300,7 @@ const SidebarCategory = (props: Props) => {
                                                 title={props.categoryBoards.name}
                                                 onClick={toggleCollapse}
                                                 {...provided.dragHandleProps}
+                                                dir='auto'
                                             >
                                                 {collapsed || snapshot.isDragging || props.forceCollapse ? <ChevronRight/> : <ChevronDown/>}
                                                 {props.categoryBoards.name}

webapp/src/components/table/tableGroupHeaderRow.tsx

@@ -113,6 +113,7 @@ const TableGroupHeaderRow = (props: Props): JSX.Element => {
                             }}
                             readonly={props.readonly || !group.option.id}
                             spellCheck={true}
+                            dir='auto'
                         />
                     </Label>}
             </div>

webapp/src/components/table/tableRow.tsx

@@ -178,6 +178,7 @@ const TableRow = (props: Props) => {
                         onCancel={() => setTitle(card.title || '')}
                         readonly={props.readonly}
                         spellCheck={true}
+                        dir='auto'
                     />
                 </div>
 

webapp/src/properties/select/select.tsx

@@ -53,7 +53,7 @@ const SelectProperty = (props: PropertyProps) => {
                 onClick={() => setOpen(true)}
             >
                 <Label color={displayValue ? propertyColorCssClassName : 'empty'}>
-                    <span className='Label-text'>{finalDisplayValue}</span>
+                    <span className='Label-text' dir='auto'>{finalDisplayValue}</span>
                 </Label>
             </div>
         )

webapp/src/properties/url/url.tsx

@@ -85,6 +85,7 @@ const URLProperty = (props: PropertyProps): JSX.Element => {
                         const urlRegexp = /(((.+:(?:\/\/)?)?(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w\-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/
                         return urlRegexp.test(value as string)
                     }}
+                    dir='auto'
                 />
             </div>
         )

webapp/src/widgets/editable.tsx

@@ -19,6 +19,7 @@ export type EditableProps = {
     onCancel?: () => void
     onSave?: (saveType: 'onEnter'|'onEsc'|'onBlur') => void
     onFocus?: () => void
+    dir?: string
 }
 
 export type Focusable = {
@@ -132,6 +133,7 @@ const Editable = (props: EditableProps, ref: React.Ref<Focusable>): JSX.Element
         <input
             {...elementProps}
             ref={elementRef}
+            dir='auto'
         />
     )
 }

webapp/src/widgets/editableArea.tsx

@@ -48,6 +48,7 @@ const EditableArea = (props: EditableProps, ref: React.Ref<Focusable>): JSX.Elem
                 {...heightProps}
                 ref={elementRef}
                 className={'EditableArea ' + elementProps.className}
+                dir='auto'
             />
             <div className={'EditableAreaContainer'}>
                 <textarea

webapp/src/widgets/valueSelector.tsx

@@ -59,7 +59,7 @@ const ValueSelectorLabel = (props: LabelProps): JSX.Element => {
                 color={option.color}
                 className={className}
             >
-                <span className='Label-text'>{option.value}</span>
+                <span className='Label-text' dir='auto'>{option.value}</span>
                 {onDeleteValue &&
                     <IconButton
                         onClick={() => onDeleteValue(option)}